Bookshelf example's
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
});
});
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:
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>
...
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>
...
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>
...
... <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>.
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.
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:
|
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
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>
Last modified 16d ago