This article details how to create a lightbox that pops up without being prompted to do so as in one of the following examples:
- Lightbox appears after page has loaded.
- Lightbox appears after a certain amount of time.
- Lightbox appears after a certain number of page turns.
To start, host the following basic viewer embed code on your organization's website:
<!DOCTYPE html>
<html>
<head>
<title>YOUR_TITLE_HERE</title>
</head>
<body>
<div id="myViewerContent" style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
<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();
// Insert "viewer loaded" event here.
</script>
</body>
</html>
Be sure to fill in your page title and 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.
To finish, copy and paste one of the following "viewer loaded" events into the code above where indicated:
// This event simply opens the lightbox as soon as the viewer has loaded.
viewer.onviewerloaded = function(event){
viewer.openLightbox("http://www.zmags.com/");
}
// This event opens the lightbox after a certain amount of time.
viewer.onviewerloaded = function(event){
setTimeout(function(){
viewer.openLightbox("http://www.zmags.com/");
}, 7000); // Select how long before lightbox appears, in ms. 1000 ms = 1 second.
}
// This event opens the lightbox afte a certain number of page turns.
var counter = -2;
// "oncurrentpageschange" triggers twice while loading viewer,
// so starting counter at negative two counteracts this.
viewer.oncurrentpageschange = function(event){
if(++counter == 5){ // Select how many page turns before lightbox appears.
viewer.openLightbox("http://www.zmags.com/");
}
}