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

... <body> ...

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

...

<script id = "yumpuMagazineScript" src = "https://players.yumpu.com/hub.js" data - yumpu - magazine - id = "55929647" data - yumpu - player - container = "myMagazineContainer" > </script>

...

(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

... <body> ...

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

...

<script id="yumpuMagazineScript" src="https://players.yumpu.com/hub.js" data-yumpu-magazine-id="55929647" data-yumpu-width="600" data-yumpu-height="450" data-yumpu-player-container="myMagazineContainer"></script>

...

(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

... <body> ...

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

...

<script id="yumpuMagazineScript" src="https://players.yumpu.com/hub.js" data-yumpu-embed-id="mimE5EX021a2pQDR" data-yumpu-player-container="myMagazineContainer"></script>

...

Bookshelf example #1

... <body> ...

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

<div id="myMagazineContainer" style="width:620px; height:302px; background-color:#AA6666;"></div>

<script>
    var myYumpu = new Yumpu();
    document.addEventListener("DOMContentLoaded", function(){
        myYumpu.create_bookshelf("#myMagazineContainer", "nQaYDBZhLPUjRzsy", "myYumpuUsername" );
    });
</script>

...

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

var myYumpu = new Yumpu();
document.addEventListener("DOMContentLoaded", function() {
	myYumpu.create_bookshelf("#myBookshelfContainer", "nQaYDBZhLPUjRzsy", "myYumpuUsername", {
		fullscreenLinkingActivated: "on",
		yumpu_bookshelf_flip_btn_color: "dark",
		title_font_color: "442222"
	});
});

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

fullscreenLinkingActivated

default: "on"

when clicking a cover, the magazine tries to open it directly in fullscreen mode (if browser supports this feature). Set "off" to deactivate it.

yumpu_bookshelf_section_titles_on

default: "on"

set "on" to show the (clickable) titles, set "off" to hide them

yumpu_bookshelf_flip_btn_color

default: "light"

set "light" to display white flip buttons, set "dark" to display them in dark gray (choose whatever fits best to the given background color)

yumpu_bookshelf_flip_throught_sections

default: "on"

set "on" to flip through section. At the end of a section the flip buttons will be shown. Set "off" to hide them - then you only can jump from section to section with the section titles below

yumpu_bookshelf_align

default: "center"

set "center" to align to center, set "left" to change the alignment to left

title_font_color

default: "FFFFFF"

set any hex color for the section titles

yumpu_logo_on_or_off

default: "on"

set "on" to show the yumpu.com logo, set "off" to hide it

usedFontFamily

default: "Open Sans"

set the font family you want the section titles to be shown with

usedFontFamilyWebFontTitle

default: "Open+Sans::latin"

This is a more advanced feature, to setup a custom google webfont in bookshelfs. Here's how to get this value:

  1. goto www.google.com/fonts and add your desired font (e.g."Roboto") with add to collection

  2. click Use in bottom right corner

  3. then, in the section 3 click on the tab Javascript

  4. you should see something like WebFontConfig = { google: { families: [ 'Roboto::latin' ] } }; ... copy the marked text Roboto::latin and use it as this parameter

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.:

myYumpu.dispose_all(); // disposing all container filled with magazines/bookshelfs

myYumpu.dispose_container("#magazineContainer"); // disposing container #magazineContainer only

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:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example - loads Yumpu magazine directly to fullscreen by a simple click on a button</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://players.yumpu.com/hub.js"></script>
    </head>

    <body onload="init();">

        <script type="text/javascript">
            // global yumpu variable
            var myYumpu;

            function init() {
                myYumpu = new Yumpu();
            }

            function create_mag() {
                // triggers creation of mag in a DIV container
                myYumpu.create_player("#magContainer", 55715319, { fallback_order:"html5", isFSOverlay:"1" });
                goFullscreen();
            }

            function goFullscreen() {
                let obj = document.getElementById("magContainer");
                // change size to fullwidth and -height
                $('#magContainer').css('width','100%');
                $('#magContainer').css('height','100%');

                // requesting fullscreen mode
                if ( obj.requestFullScreen )
                    obj.requestFullScreen();
                else if ( obj.webkitRequestFullScreen )
                    obj.webkitRequestFullScreen();
                else if ( obj.mozRequestFullScreen )
                    obj.mozRequestFullScreen();
                else if ( obj.msRequestFullscreen )
                    obj.msRequestFullscreen();

                $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', cancelFullscreen );
            }

            function cancelFullscreen() {
                var doc = window.document;

                if( !doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
                    // fullscreen mode canceled -> back to "normal"
                    $('#magContainer').css('width','200px');
                    $('#magContainer').css('height','200px');
                    // kill fullscreen listener
                    $(document).off('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', cancelFullscreen );

                    // destroy magazine and clear container
                    myYumpu.dispose_container("#magContainer");
                }
            }
        </script>

        <!-- entry point: create empty HTML container for a magazine -->
        <div id="magContainer" style="width:200px; height:200px; background-color:#606;"></div>

        <!-- this triggers the loading of a magazine, viewing in fullscreen mode -->
        <button onclick="create_mag();">create magazine</button>

    </body>
</html>
PreviousMagazine example'sNextFAQs

Last updated