Using our embedded viewer API, it is possible to load your Zmags publications into a page on your own website, and from there HTML and JavaScript can be used to add any number of customizations. One we hear mentioned frequently is the option to have custom page turn buttons:
The following tutorial demonstrates a simple setup that can be used to display custom navigation buttons on your own embedded viewer page. Here is the basic HTML structure we'll be using:
<!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();
</script>
</head>
<body style="background:lightgray;">
<!-- Viewer div. -->
<div id="myViewerContent" style="position:fixed; top:0px; left:0px; height:100%; width:100%;"></div>
<!-- Navigation Arrows -->
<img id="prev" onclick="viewer.gotoPreviousPages();" src="./left_arrow.png">
<img id="next" onclick="viewer.gotoNextPages();" src="./right_arrow.png">
</body>
</html>
To start, copy that into your favorite text editor (such as Notepad++ on PC, or TextWrangler on Mac OS) and save it as an HTML file. This can be done by ending the filename with .html and enclosing the entire thing in quotes, like so: "filename.html"
Be sure to fill out your page title and publication ID where indicated in the code. Your publication's ID can be found by clicking its name in the "All Publications" list of the Zmags Publicator. For best results, equip your publication with a viewer whose settings have the built-in "page change arrows" disabled.
After that's done, chose one of the following <style> tags to use:
<!-- Top arrows, overlapping viewer. -->
<style>
#viewer{ position:fixed; top:0px; left:0px; height:100%; width:100%; }
#prev{ position:fixed; top:10px; left:10px; z-index:1; }
#next{ position:fixed; top:10px; right:10px; z-index:1; }
</style>
<!-- Center arrows, overlapping viewer. -->
<style>
#viewer{ position:fixed; top:0px; left:0px; height:100%; width:100%; }
#prev{ position:fixed; top:50%; margin-top:-50px; left:10px; z-index:1; }
#next{ position:fixed; top:50%; margin-top:-50px; right:10px; z-index:1; }
</style>
<!-- Bottom arrows, overlapping viewer. -->
<style>
#viewer{ position:fixed; top:0px; left:0px; height:100%; width:100%; }
#prev{ position:fixed; bottom:10px; left:10px; z-index:1; }
#next{ position:fixed; bottom:10px; right:10px; z-index:1; }
</style>
<!-- Top arrows, outside viewer. -->
<style>
#viewer{ position:fixed; bottom:0px; left:0px; height:100%; width:100%; }
#prev{ position:fixed; top:2px; left:10px; height:50px; }
#next{ position:fixed; top:2px; right:10px; height:50px; }
</style>
<!-- Center arrows, outside viewer. -->
<style>
#viewer{ position:fixed; top:0px; left:50%; margin-left:-50%; height:100%; width:100%; }
#prev{ position:fixed; top:50%; margin-top:-25px; left:2px; height:50px; }
#next{ position:fixed; top:50%; margin-top:-25px; right:2px; height:50px; }
</style>
<!-- Bottom arrows, outside viewer. -->
<style>
#viewer{ position:fixed; top:0px; left:0px; height:100%; width:100%; }
#prev{ position:fixed; bottom:3px; left:10px; height:50px; }
#next{ position:fixed; bottom:3px; right:10px; height:50px; }
</style>
Add the desired style to the <head> section of your HTML, below the </script> closing tag.
If you're using a style that places the arrows outside of the viewer area, you will also need some additional JavaScript. Choose the appropriate block for your selection and add it to the <head> section, inside of (that is to say, just above) the </script> closing tag.
<!-- Top arrows, outside viewer. -->
function apply_settings(){
var height = String((window.innerHeight || document.documentElement.clientHeight) - 55)+"px";
document.getElementById('myViewerContent').style.cssText = "position:fixed; bottom:0px; left:0px; height:"+height+"; width:100%;";
try{ window.dispatchEvent(new Event('resize'), false); }
catch(e){ window.resizeTo(screen.availWidth-1, screen.availHeight-1); setTimeout(function(){ window.resizeTo(screen.availWidth,screen.availHeight); }, 50); }
}
window.addEventListener("load", apply_settings);
window.addEventListener("resize", apply_settings);
window.addEventListener("orientationchange", apply_settings);
<!-- Center arrows, outside viewer. -->
function apply_settings(){
var width = (window.innerWidth || document.documentElement.clientWidth) - 110;
document.getElementById('myViewerContent').style.cssText = "position:fixed; top:0px; left:50%; margin-left:"+String(-width/2)+"px; height:100%; width:"+String(width)+"px;";
try{ window.dispatchEvent(new Event('resize'), false); }
catch(e){ window.resizeTo(screen.availWidth-1, screen.availHeight-1); setTimeout(function(){ window.resizeTo(screen.availWidth,screen.availHeight); }, 50); }
}
window.addEventListener("load", apply_settings);
window.addEventListener("resize", apply_settings);
window.addEventListener("orientationchange", apply_settings);
<!-- Bottom arrows, outside viewer. -->
function apply_settings(){
var height = String((window.innerHeight || document.documentElement.clientHeight) - 55)+"px";
document.getElementById('myViewerContent').style.cssText = "position:fixed; top:0px; left:0px; height:"+height+"; width:100%;";
try{ window.dispatchEvent(new Event('resize'), false); }
catch(e){ window.resizeTo(screen.availWidth-1, screen.availHeight-1); setTimeout(function(){ window.resizeTo(screen.availWidth,screen.availHeight); }, 50); }
}
window.addEventListener("load", apply_settings);
window.addEventListener("resize", apply_settings);
window.addEventListener("orientationchange", apply_settings);
Finally, select the images you would like to use for your forward and back page-turn-arrows. You can right-click and "save image as" a set from the interactive demo, find a pair online somewhere, or create your own. Regardless, we suggest using square PNG images somewhere around 100 pixels height and width. Name these "left_arrow" and "right_arrow", and upload them to the same folder as your HTML file.
Comments
0 comments
Please sign in to leave a comment.