Bookshelf example's

Okay, got it. But how about multiple magazines on one page?

You only have to create the Yumpu object once and then create as much magazines out of as as you want. But don't forget to provide enough <div> containers:

var myYumpu = new Yumpu();
document.addEventListener("DOMContentLoaded", function() {
	myYumpu.create_player("#myMagazineContainerNo1", "55929647", {
		startpage: 2
	});
	myYumpu.create_player("#myMagazineContainerNo2", "55929647", {
		startpage: 3
	});
	myYumpu.create_player("#myMagazineContainerNo3", "55929647", {
		startpage: 4
	});
});

I'm kinda lazy, isn't there something less complex? Some kind of 1-liner?

Yes, there is! You can add a magazine, or even an embed code you previously created ith one line. Just add some parameters to the <script>-tag where you include hub.js and you're done. But notice that you will NOT be able to add multiple magazines on one page. And don't forget to add a <div> container also:

(1) Create a magazine

Simply create a magazine in a given container. Add id="yumpuMagazineScript", data-yumpu-player-container="myMagazineContainer" and data-yumpu-magazine-id="55929647" (in this example "55929647" is the magazine ID) to the tag

(2) Create a magazine and set width and height

Simply create a magazine in a given container. Add id="yumpuMagazineScript", data-yumpu-player-container="myMagazineContainer", data-yumpu-width="600", data-yumpu-height="450" and data-yumpu-magazine-id="35285631" (in this example "35285631" is the magazine ID and of course you can change the values of width and height as well)to the <script> tag

(3) Create a magazine with an embed hash

Simply create a magazine in a given container. Add id="yumpuMagazineScript", data-yumpu-player-container="myMagazineContainer" and data-yumpu-embed-id="mimE5EX021a2pQDR" (in this example "mimE5EX021a2pQDR" is the embed hash - replace with yours)to the <script> tag

Bookshelf example #1

Result:

You should see a bookshelf in a <div> with a dimension of 600 x 260 px. The background color can be set in the style attributes of the <div>.

Bookshelf example #2

Result:

You should see a bookshelf in a <div> with a light red background and a dimension of 600 x 260 px. As we have a <div> with a light background color, we want dark arrows, which we achieve with the parameter yumpu_bookshelf_flip_btn_color setting to "dark". With setting fullscreenLinkingActivated to on, the bookshelf tries to open the magazine a user clicked on directly in fullscreen mode. Note that some browsers might not support this feature. Setting title_font_color to 442222 (HEX color) will show the section titles in a dark gray'ish red.

Additional parameters

Tidy up - disposing mags/bookshelfs at runtime

You can either dispose all frontends with .dispose_all() or you can only dispose a single container with .dispose_ontainer("#myContainer"). E.g.:

Example for advanced users: Loading magazine directly in fullscreen mode with a single click on a button

In this example you can see how to open a magazine in a DIV tag with a simple click on a button. Everything will be loaded on demand. No iFrames will be used. And, when leaving fullscreen mode, everything get's disposed and cleaned up. The code should be self-explanatory to advanced users who have experience with Javascript: