Basic Example
Advanced Example: Change Ads on Page Turn
Basic Example
The following example uses the Zmags Embedded Viewer API. It assumes that readers have general knowledge of embedding the viewer already. If this is not the case, feel free to click the link above for more information.
The code below provides a template layout to hold your embedded publication, a logo image, one horizontal banner ad, and two vertical banner ads. You may see it running here:
And here is the code itself:
<!DOCTYPE html>
<html>
<head>
<title>YOUR_TITLE_HERE</title>
<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
</head>
<body style="background:#EFEFEF; overflow:hidden;">
<div id="siteContainer" style="position:absolute; top:0px; left:15%; height:100%; width:70%; background:white; -moz-box-shadow: 0 0 4px 0 black; -webkit-box-shadow: 0 0 4px 0 black; box-shadow: 0 0 4px 0 black;">
<!-- Logo image. -->
<a href="URL_HERE" target="_blank"><img src="YOUR_IMAGE_HERE" style="position:absolute; margin:10px; border:0; z-index:1;"></a>
<!-- Banner ads, in this order: top, left, right. -->
<img src="YOUR_IMAGE_HERE" style="position:absolute; top:36px; left:40%; height:60px; width:468px; border:solid 1px #8C8C8C; z-index:1;">
<img src="YOUR_IMAGE_HERE" style="position:absolute; top:100px; left:-145px; height:600px; width:120px; border:solid 1px #8C8C8C;">
<img src="YOUR_IMAGE_HERE" style="position:absolute; top:100px; right:-145px; height:600px; width:120px; border:solid 1px #8C8C8C;">
<!-- Embedding code below. -->
<script>
<!-- Loads the viewer. -->
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("PUBLICATION_ID_HERE");
viewer.setParentElementID("myViewerContent");
viewer.show();
<!-- Make space for the logo and top banner. -->
function sizeViewer(){
var height = window.innerHeight || document.documentElement.clientHeight;
document.getElementById('myViewerContent').style.height = String(height-134)+"px";
viewer.resize();
}
viewer.addEventListener(com.zmags.api.Viewer.VIEWER_LOADED, sizeViewer);
window.onresize = sizeViewer;
</script>
<div id="myViewerContent" style="position:absolute; bottom:0px; left:0px; width:100%; height:100%; border-top:solid #8C8C8C 1px;"></div>
</div>
</body>
</html>
To use the above code:
1) Copy and paste it in its entirety into your favorite text editor.
2) Save it as an HTML file (end the file name with .html, and surround it with "quotation marks" when saving).
3) Swap out YOUR_TITLE_HERE for a proper title.
4) Change out PUBLICATION_ID_HERE for the ID of your Zmags publication, which can be found by clicking its name in the "All Publications" list of the Publicator.
5) Change out URL_HERE for the URL you would like each image to link to when clicked.
6) Change out YOUR_IMAGE_HERE for the URL of the image you would like to put in each place. The following sizes are recommended:
| Logo Image | 383 x 114 pixels (maximum) 280 x 90 pixels (recommended) |
| Top Banner | 486 x 60 pixels (exactly*) |
| Side Banners | 120 x 600 pixels (exactly*) |
* Other sizes can be used, but it is recommended to first adjust the image 'style' for appropriate size and positioning. These can be found to the right of YOUR_IMAGE_HERE in the example code.
7) Host the HTML on your organization's website.
Advanced Example: Change Ads on Page Turn
With a little bit of extra code, we can extend this example to rotate in additional ads every so often as pages are turned.
Here is the code that was used:
<!DOCTYPE html> <html> <head> <title>YOUR_TITLE_HERE</title> <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script> </head> <body style="background:#EFEFEF; overflow:hidden;"> <div id="siteContainer" style="position:absolute; top:0px; left:15%; height:100%; width:70%; background:white; -moz-box-shadow: 0 0 4px 0 black; -webkit-box-shadow: 0 0 4px 0 black; box-shadow: 0 0 4px 0 black;"> <!-- Logo image. --> <a href="LOGO_URL_HERE"><img src="YOUR_LOGO_HERE" style="position:absolute; margin:10px; border:0; z-index:1;"></a> <!-- Banner ads, in this order: top, left, right. --> <a id="a_t" href="T1_URL_HERE" target="_blank"><img id="top" src="./images/t1.png" onclick="adClicked(this.src);" style="position:absolute; top:36px; left:40%; height:60px; width:468px; border:solid 1px #8C8C8C; z-index:1;"></a> <a id="a_l" href="L1_URL_HERE" target="_blank"><img id="left" src="./images/l1.png" onclick="adClicked(this.src);" style="position:absolute; top:100px; left:-145px; height:600px; width:120px; border:solid 1px #8C8C8C;"></a> <a id="a_r" href="R1_URL_HERE" target="_blank"><img id="right" src="./images/r1.png" onclick="adClicked(this.src);" style="position:absolute; top:100px; right:-145px; height:600px; width:120px; border:solid 1px #8C8C8C;"></a> <!-- Zmags code below. --> <script> <!-- Loads the Zmags viewer. --> var viewer = new com.zmags.api.Viewer(); viewer.setPublicationID("PUBLICATION_ID_HERE"); viewer.setParentElementID("myViewerContent"); viewer.show(); <!-- Make space for the logo and top banner. --> function sizeViewer(){ var height = window.innerHeight || document.documentElement.clientHeight; document.getElementById('myViewerContent').style.height = String(height-134)+"px"; viewer.resize(); } viewer.addEventListener(com.zmags.api.Viewer.VIEWER_LOADED, sizeViewer); window.onresize = sizeViewer; <!-- List of URLs for each ad to direct to when clicked. --> url_list = [ /* t1 */ "T1_URL_HERE", /* t2 */ "T2_URL_HERE", /* t3 */ "T3_URL_HERE", /* l1 */ "L1_URL_HERE", /* l2 */ "L2_URL_HERE", /* l3 */ "L3_URL_HERE", /* r1 */ "R1_URL_HERE", /* r2 */ "R2_URL_HERE", /* r3 */ "R3_URL_HERE", ]; <!-- Change ads every 4 page turns. --> var i = 0; var changeEvery = 4; var currentSet = 1; var numSets = 3; function changeAds(event){ if(++i == changeEvery){ if(++currentSet > numSets){ currentSet = 1; } document.getElementById('top').src = "./images/t" + currentSet + ".png"; document.getElementById('left').src = "./images/l" + currentSet + ".png"; document.getElementById('right').src = "./images/r" + currentSet + ".png"; document.getElementById('right').src = "./images/r" + currentSet + ".png"; document.getElementById('a_t').href = url_list[currentSet-1]; document.getElementById('a_l').href = url_list[numSets+currentSet-1]; document.getElementById('a_r').href = url_list[(numSets*2)+currentSet-1]; i = 0; } } viewer.onviewerloaded = function(event){ viewer.addEventListener(com.zmags.api.Viewer.CURRENT_PAGES_CHANGE, changeAds); } </script> <div id="myViewerContent" style="position:absolute; bottom:0px; left:0px; width:100%; height:100%; border-top:solid #8C8C8C 1px;"></div> </div> </body> </html>
To use the above code:
1) Copy and paste it in its entirety into your favorite text editor.
2) Save it as an HTML file (end the file name with .html, and surround it with "quotation marks" when saving).
3) Swap out YOUR_TITLE_HERE for a proper title.
4) Change out PUBLICATION_ID_HERE for the ID of your Zmags publication, which can be found by clicking its name in the "All Publications" list of the Publicator.
5) Change out all instances of XX_URL_HERE for the URL you would like each image to link to when clicked, where the first X is T, L, or R for top, left, or right banner, and the second X indicates which set of banners.
6) Set changeEvery to the number of pages after which you would like the ads to be changed. The default is 4.
7) Set numSets to the number of sets of banner ads included. The default is 3.
8) Host the HTML on your organization's website. It is assumed that images are in a folder named 'images', which is located in the same place as the HTML file. The images should be PNG files named t#, l#, and r#, where # is the set number.
Adding Additional Banner Sets
To add an additional set of banners, do the following:
1) Add three images to the image folder, with appropriate names.
2) Increase numSets by one.
3) In url_list, add a line for the latest t#, l#, and r# below their respective groups. The order of this list is important!