This article showcases how to enable your publication to flip through its pages automatically using the Verge Viewer. This functionality is great for trade shows, in-store demos, and any situation where you would like a Publication to present all of its pages without needing to be manually scroll through.
The functionality is available by way of our embedded viewer API:
To use this functionality on your own site, host the below embed code as an HTML file. Don't forget to fill in the desired page title and your publication ID where indicated! (The publication ID can be found by clicking your publication's name in the "All Publications" list of the Zmags Publicator.)
<!DOCTYPE html>
<html>
<head>
<title>YOUR_TITLE_HERE</title>
<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("PUB_ID_HERE");
viewer.setParentElementID("myViewerContent");
viewer.show();
// Configuration variables for automatic page flipping.
var loop = true; // return to start at end (true), or reverse directions instead (false)
var inter = 3; // number of seconds to wait between page flips
var dir = 1; // 0 = backwards, 1 = forwards
var pause = false;
// This function runs periodically to handle automatic page flipping.
function pageflip(){
if(!pause){
if(dir == 1){
viewer.atLastPage(function(data){
if(data.atLastPage){
// Do this when we're moving forward and at the last page.
if(loop){
viewer.gotoFirstPages();
}
else{
dir = 0;
viewer.gotoPreviousPages();
}
}
else{
// Do this when we're moving forward but not at the last page.
viewer.gotoNextPages();
}
});
}
else{
viewer.atFirstPage(function(data){
if(data.atFirstPage){
// Do this when we're moving backward and at the first page.
if(loop){
viewer.gotoLastPages();
}
else{
dir = 1;
viewer.gotoNextPages();
}
}
else{
// Do this when we're moving backward but not at the first page.
viewer.gotoPreviousPages();
}
});
}
}
setTimeout(pageflip, inter*1000);
}
viewer.onviewerloaded = setTimeout(pageflip, inter*1000);
</script>
</head>
<body>
<!-- Div to contain the viewer. -->
<div id="myViewerContent" style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
<!-- This control panel is primarily for demo purposes. You may wish to remove all or part of it before using this example. -->
<div id="cpanel" onmouseover="this.style.opacity='1';" onmouseout="this.style.opacity='0.2';" style="position:fixed; bottom:5px; right:5px; padding:5px; background:white; border:solid black 1px; border-radius:5px; opacity:0.2;">
<b>Control Panel</b><br>
<button onclick="
if(pause == false){
this.innerHTML = 'paused';
pause = true;
}
else{
this.innerHTML = 'unpaused';
pause = false;
}
">unpaused</button><br>
<button onclick="
if(loop == false){
this.innerHTML = 'loop = true';
loop = true;
}
else{
this.innerHTML = 'loop = false';
loop = false;
}
">loop = true</button><br>
time:<input type="text" name="inter" value="3" style="width:15px;"><button onclick="
var input = document.getElementsByName('inter')[0];
input.style.background = '';
var n = input.value.trim();
if(!isNaN(+n) && isFinite(n) && n != ''){
inter = n;
}
else{
input.style.background = 'darksalmon';
}
">go</button>
</div>
</body>
</html>