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:
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> ...<divid="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
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
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 =newYumpu();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
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/bookshelfsmyYumpu.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>
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:
goto www.google.com/fonts and add your desired font (e.g."Roboto") with add to collection
click Use in bottom right corner
then, in the section 3 click on the tab Javascript
you should see something like WebFontConfig = { google: { families: [ 'Roboto::latin' ] } }; ... copy the marked text Roboto::latin and use it as this parameter
