Lightboxes that Pop Up Automatically

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 pop-up after 7 seconds:

https://zmags.myshopify.com/pages/publicator-test-auto-lightbox

Note: The publication must have a single lightbox link added on the first page of the catalog

To start, host the following basic viewer embed code on your organization's website:

<script type="text/javascript" src="https://secure.api.viewer.zmags.com/viewer/viewer.js"></script>
<div id="myViewerContent" style="width:100%; height:600px;"></div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("INSERT_PUBLICATION_ID_HERE");
viewer.setParentElementID("myViewerContent");
viewer.show();

//INSERT "VIEWER LOADED" EVENTS HERE

</script>

Be sure to fill in 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.

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 after 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/");
    }
}