Magazine example #1

... <body> ...

<script type="text/javascript" src="https://players.yumpu.com/hub.js"></script>

<div id="myMagazineContainer" style="width:600px; height:744px;"></div>
<script>
    var myYumpu = new Yumpu();
    document.addEventListener("DOMContentLoaded", function(){
        myYumpu.create_player("#myMagazineContainer", "55929647", { canvasBGColor:"#e65117", fallback_order:"flash,html5,js" } );
    });
</script>

...

Result:

You should see a magazine in a <div> with a dimension of 600 x 744 px, with an orange background. The orange background is set within the additional parameters { ... canvasBGColor:"#e65117", ... }. Use any color you like and place it in HEX color code. If you don't set this parameter then the background will be transparent. You can also set the <div>'s background color if you like with CSS. The parameter { ... fallback_order:"flash,html5,js", ... } will set the prefered technology. In this example you'll get the Flash Player version - if you don't have the Flash Player, then it will try to fallback to the second value "html5" and if your browser can't handle HTML5 it will show you our simple Javascript+HTML4 player.

Automatic fallback

As mentioned in the example above, you can set the "fallback_order" Parameter to force a certain technology. Every technology has it's advantages - the Flash Player version is faster and can handle the loading of images better than the HTML5 version; the HTML5 version on the other hand will run on desktop computers, as well as on mobile devices, and so on. But our automatic fallback procedure will provide users the best player technology anyway! On mobile devices a user will get our HTML5-mobile-player by default.

In other words, you don't have to set this parameter, which is "html5,flash,js" by default and you don't have to worry anyway.

Additional parameters

fallback_orderdefault: "html5,flash,js"order of technology to use as the player
singlepageViewOndefault: "0"set "1" to see the magazin in a single page view
startpagedefault: "1"set any page number you want to magazine to jump on start
hideOuterShadowsdefault: "0"set "1" to hide all shadow effects outside the magazine
hideInnerShadowsdefault: "0"set "1" to hide all shadow effects inside the magazine
canvasBGColordefault: "transparent"e.g. set "#00FF00" to get a green background in normal view
canvasFSBGColordefault: "standard"e.g. set "#FF0000" to get a red background in fullscreen view
c2rOnOffdefault: "on"set "off" to completely hide the click-to-read-button
c2rTextdefault: "Click to read" [en]set to any text you like to address a user to click, e.g. "Enlarge to fullscreen", etc.
c2rModedefault: "fullscreen"the default value "fullscreen" will activate the fullscreen mode on click by the user. You can also set to "external" to redirect a user to another site. You can specify the URL with the next parameter "c2rURL".
c2rURLdefault: "on"set an URL/link, e.g. to any interesting website you want the user to redirect when clicking onto the button
embeddeddefault: false When set to false, you'll see the magazin like you would se it on yumpu.com. If set to true the view changes a bit, as we deliver embedded magazines you normally see in our embed generator.
playerElementPageNumbersdefault: "on"set to "off" you'll hide the page numbers in the player
playerElementLogodefault: "on"set to "off" you'll hide the logo
playerElementPoweredBydefault: "on"set to "off" you'll hide the claim "powered by yumpu"
playerElementOverviewdefault: "on"set to "off" you'll hide the overview at the bottom
playerElementFSShareLinksdefault: "on"set to "off" you'll hide the social sharing functions
playerElementFSDownloaddefault: "on"set to "off" you'll hide the button with which you can download the magazines PDF
playerElementFSPrintdefault: "on"set to "off" you'll hide the print button in fullscreen mode
playerElementFSRecomdefault: "on"set to "off" you'll hide the recommendations on the right side in fullscreen mode
isFSOverlaydefault: "0"set to "1" you tell the frontend to be used as a magazine, which will be directly opened in fullscreen mode, hence showing the "X" (top right) to close the fullscreen mode. The frontend cannot detect this case for sure in all cases, which makes this parameter necessary.
langdefault: "en"use your desired 2 digit language code (e.g. "en" = english, "it" = italian, "es" = spanish, and so on), so the frontend knows which language file it has to load, which affects especially the tooltip texts

Magazine example #2

In the next example we'll create a magazine where we link the user directly to the index page ({startpage:"3"}). We also want to show it in the embed style ({... embedded:true}), show it as a single page ({singlepageViewOn:"1"}) and set the background green ({canvasBGColor:"#7a9986"}).

... <body> ...

<script type="text/javascript" src="https://players.yumpu.com/hub.js"></script>

<div id="myMagazineContainer" style="width:600px; height:744px;"></div>

<script>
 var myYumpu = new Yumpu();
 document.addEventListener("DOMContentLoaded", function() {
     myYumpu.create_player("#myMagazineContainer", "55929647", {  startpage:"3", embedded:true, singlepageViewOn:"1", canvasBGColor:"#7a9986", fallback_order:"flash,html5,js" } );
 });
</script>

...

Result:

results matching ""

    No results matching ""