YumpuMagazine.pdf

TODDYCAT
Multiplatform User Interface for Documents of the Yumpu Backend
!
You are seeing this magazine because you have successfully
called the YumpuMagazine.js. Unfortunately you did not
provide a valid document-id or div-container.
See page 6 to get started.
TODDYCAT Documentation
1

TODDYCAT
YumpuMagazine.js Player und Bookshelf
The YumpuMagazine.js player enables a simple and flexible rendering
of your documents on any website. Independent of the used browsers
and without any download your magazines can be read online, through
the use of the JavaScript library and the Yumpu-SAAS service.
The player can be called by using a simple script instead of an iFrame
as before. This technology enables to show more than just one player
on a single webpage, no matter if HTML5, HTML5-Mobile, Flash or
JavaScript-jHook.
Furthermore bookshelfs can be created in the same way – fast, simple
and flexible.
TODDYCAT Documentation
2
TODDYCAT Documentation
3

CONTENT
EMBED MAGAZINE
STEP BY STEP INSTRUCTION
Description of embedding one or more magazines
on a website and how to set further parameters.
Page 6 - 10
EMBED BOOKSHELF
STEP BY STEP INSTRUCTION
How to embed a bookshelf on a webpage and
some more parameters to use with the bookshelf.
Page 12 - 13
TODDYCAT Documentation
4
TODDYCAT Documentation
5

1. EMBED MAGAZINE
STEP BY STEP INSTRUCTION
!
Requirement:
A user must have a magazine-ID at least to embed a magazine.
Minimal Version:
You need at least the following code to embed a functional magazine player.
How to embed a magazine:
Follow the steps to embed your magazine successfully.
1. Include script:
2. Create a DIV container for the player:
Prepare a DIV container which will include the player. The player fits automatically to the size of
the DIV container. Therefor ensure that the DIV container can adapt itself to different sizes (e.g. by
using percent value).
!
Please note:
If you are using data-attributes in , you have to set id-attribute to
„yumpuMagazineScript“. By using exactly this code you embed one magazine.
If you prefer to embed more than one magazine on your page, use the following
version „Basic version with parameters“.
3. Create a new Yumpu-Object (JS):
As there are no further parameters, the transfer variables get default values. In this way the call of
the player can stay short.
3.1. Assignment of further parameters:
You can assign further parameters to the player.
TODDYCAT Documentation
6
TODDYCAT Documentation
7

Basic version with parameters:
Advanced magazine parameters:
fallback_order
default: „html5,flash,js“
Avoid HTML5 player with „flash.js“, or force the simple JavaScript
fallback player with „js“, or prefer flash player with „flash,html5,js“.
Note to usage:
If a player type is not set, it won’t show up - but be aware that this
could cause a player to not work in certain browsers (e.g. the flash
version is forced in Safari and IE because they are not fully capable
of HTML5 and cross domain loading of images).
Note to automatic fallback:
When using „html5,flash,js“, our software checks, if HTML5 is supported
- if so, show html5 player, if not: check if flash is supported - if so,
show flash player, if not show Javascript fallback player.
Note to mobile devices:
On all mobile devices our HTML5 mobile player will be loaded
automatically, instead of any other.
shareLocation default: “ “
set string to value of your webkiosk domain, if you have one
e.g. “http(s)://www.yourkiosk.com”
aboteaser
aboteaserLink
aboteaserAction
firstLastPageButtonsOff
autoflipPages
URL to aboteaser image
URL to link to when clicking on aboteaser
javascript function name of function which should be called when
clicking on the aboteaser
default “1“, set “0“ to hide buttons
default “0“, set “1” when magazine should flip automatically after
loading
TODDYCAT Documentation
8
TODDYCAT Documentation
9

Advanced magazine parameters:
Additional parameters for flash frontend:
hideSearch
hideTAF
guiFullscreen
guiFlipbuttons
guiOverview
guiZoom
guiMute
guiSinglepage
default “0”, “1“ will hide the search
default “0”, “1“ will hide “tell a friend” (send recommendation email)
default “0”, “1“ will hide fullscreen button in menu bar
default “0”, “1“ will hide small flip buttons in menu bar
default “0”, “1“ will hide overview button in menu bar
default “0”, “1“ will hide zoom button in menu bar
default “0”, “1” will hide mute button in menu bar
default “0”, “1” will hide “change view” button in menu bar
Example:
Multi-Instance-Call with minimal-parameters [HTML-Container] and [Magazine-ID]. Especially in
the WEBKiosk the additional parameter {ydomain:“http://www.webkiosk.com“ } should be set:
var toddycat = new Yumpu();
toddycat.create_player(„#divContainer1“, „394762“ );
toddycat.create_player(„#divContainer2“, „4112855“ );
toddycat.create_player(„#divContainer3“, „17403090“ );
toddycat.create_player(„#divContainer4“, „12905“ );
TODDYCAT Documentation
10
TODDYCAT Documentation
11

2. EMBED BOOKSHELF
STEP BY STEP INSTRUCTION
Additional parameters for flash frontend:
var params={};
see „Complete list of all params“
var jsonColData;
Object with the collection data. Using this parameter, the collectionID
and UserID doesn‘t have to be declared.
How to embed a bookshelf:
Follow the steps to embed a bookshelf which contains your magazines.
Note: Step 1 and 2 are the same as in the first chapter „Embed Magazine“.
1. Include script:
var cover_size=“m“
var width;
Possible values are: “s“, “m“ or “l“ (small, medium, large covers)
Width of the embed. But note: The width is unnecessary since the
bookshelf fits to the size of the DIV Container with 100%.
myYumpu.create_bookshelf(“myDIVContainer“, collectionID, userID, params, jsonColData, “0“,
cover_size, width);
Complete list of all params:
fullscreenLinkingActivated default “0”
2. Create a DIV container for the player:
Prepare a DIV container which will include the player. The player fits automatically to the size of
the DIV container. Therefore ensure that the DIV container adapt itself to different sizes (e.g. by
using percent value).
3. Provide required values:
The minimum set of values consists of a DIV-Container, Collection-ID and User-ID (ID of the user which
is the owner of the collection). Additional data are loaded automatically.
- DIV Container
- Collection ID
- User ID (of the collection owner)
isMobileDevice
yumpu_bookshelf_section_titles_on
yumpu_bookshelf_target
yumpu_bookshelf_flip_btn_color
yumpu_bookshelf_flip_throught_sections
yumpu_bookshelf_align
yumpu_logo_on_or_off
title_font_color
usedFontFamily
usedFontFamilyWebFontTitle
ydomain
yumpu_bookshelf_target_url
true/false (set automatically)
default “on”
default “magazinePage“
default “light“
default “on“
default “center“
default “on“
default “FFFFFF“
default “OpenSans“
default “Open+Sans::latin“
http(s)://www.domain.com/
usually: http(s)://(local/dev/www.yumpu.com/)
default “ydomain“
4. Create a new Yumpu-Object (JS):
Create a new Yumpu-Object and call “create_bookshelf“:
var myYumpu = new Yumpu();
myYumpu.create_bookshelf(“myDIVContainer“, collectionID, userID);
embedded
default “false“
Example:
#centipedeEmbed = ID of the HTML element in which the player should be loaded
“12905“ = the Magazine-ID
toddycat.create_player(„#centipedeEmbed“, „12905“, { magazineID: „10000“,
ydomain:“http://local.yumpu.com/“, c2rMode: „fullscreen“, c2rURL: „“,
c2rText: „Click to what?“, c2rOnOff: „on“, embedded: false,
canvasBGColor: „transparent“, author: „ggschelling“, hideInnerShadows: „0“,
hideOuterShadows: „0“, playerElementPageNumbers: „on“, playerElementLogo: „on“,
playerElementPoweredBy: „on“, playerElementOverview: „on“, playerElementFSShareLinks: „on“,
playerElementFSDownload: „on“, playerElementFSPrint: „on“, playerElementFSRecom: „on“,
canvasFSBGColor: „standard“, singlepageViewOn:“0“, origin:“yumpu“ } );
TODDYCAT Documentation
12
TODDYCAT Documentation
13

TODDYCAT
i-magazin AG
Gewerbestraße 3
9444 Diepoldsau, Switzerland
info@i-magazine.de
+49 (0)89 41 61 70 20
www.i-magazine.de
TODDYCAT Documentation
14
Made with love in Switzerland.