Magazine example's

Magazine example #1

var myYumpu = new Yumpu();
document.addEventListener("DOMContentLoaded", function() {
	myYumpu.create_player("#myMagazineContainer", "55929647", {
		canvasBGColor: "#e65117",
		fallback_order: "hornet,html5,js"
	});
});

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:"hornet,html5,js", ... } will set the prefered technology. In this example you'll get the Hornet Player - if the browser doesn't support WebGL, 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 Hornet Player 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 "hornet,html5,js" by default and you don't have to worry anyway.

Additional parameters

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"}).

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

Result:

PreviousQuick setup NextBookshelf example's

Last updated 11 months ago

var myYumpu = new Yumpu(); document.addEventListener("DOMContentLoaded", function() { myYumpu.create_player("#myMagazineContainer", "55929647", { canvasBGColor: "#e65117", fallback_order: "hornet,html5,js" }); });

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