How can I open a document in fullscreen with Javascript?

I use yumpu js api to embed documents in my pages. For example
var myYumpu = new Yumpu();
document.addEventListener(“DOMContentLoaded”, function(){
        myYumpu.create_player(“#myMagazineContainer”, “12345678″, { lang:”de”, singlepageViewOn:”1″, fallback_order:”flash,html5,js” } );
where 12345678 is the document id. This works well.
However, I do not want to show the document embed. I would like to open the document id=12345678 in fullscreen mode when a user clicks on a div container with an icon image. Therefore I cannot use the embed wizard as it creates iframes where I cannot customize the html inside.
Is there any function within the api to do this?
Yumpu User Eingetragen am October 7, 2017 in Magazine optimieren.
Kommentar hinzufügen
1 Answer(s)

You will be interested in the yumpu js player. Get it from here:

https://players.yumpu.com/hub.js

Examples and a full documentation about the settings are on the official API-documentation, over here: https://developers.yumpu.com/magazine-examples.html

You would put a html container inside your page, let’s say:

<div id="myFullScreenDivID"></div>

Then you could start your yumpu player with the following code (where “12345678” is your magazine id):

myYumpu = new Yumpu();
myYumpu.create_player("#myFullScreenDivID", "12345678" ) {
 canvasBGColor : "#808080",
 canvasFSBGColor : "#808080",
 fallback_order : "flash,html5,js",
 isFSOverlay : "1",
 c2rText : "",
 embedded : true,
 lang : "en"
});

To start your fullscreen mode, just use one of the various ways to initialize it, like for example this (with jQuery):

var elem = document.getElementById("myFullScreenDivID");
if (elem.requestFullscreen) {
 elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
 elem.webkitRequestFullscreen();
}
$(document).off("webkitfullscreenchange mozfullscreenchange fullscreenchange").on("webkitfullscreenchange mozfullscreenchange fullscreenchange", function(e) {
 var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 if( typeof state === "undefined" || state !== true ) {
 $("#myFullScreenDivID").remove();
 }
});

 

 

Yumpu User Beantwortet vor 4 Tagen .
Kommentar hinzufügen

Ihre Antwort

Durch klicken auf "Absenden" stimmen Sie unserer Privacy Policy und den AGB zu.