Multiple Lightbox Styles in one Publication – Fastr Publicator Community

Using the Code with your own Publications
Title and Publication ID
Style List
URL List
Finishing Up

Our built-in lightbox solution is a great way to easily add light box popups to your publication, and our custom CSS guide can tell you all about how to style them in any way you'd like. Ordinarily however, it is not possible to feature light boxes of multiple different styles in one publication. The following tutorial seeks to address that.

Note: If you are only trying to have multiple lightbox sizes, this solution is no longer needed. (Simply use the "Lightbox height and width" option when creating your links.) The below is intended for if you are looking to add multiple styles too, such as differing colors or border types.

(Click here to see example!)

Using the Code with your own Publications

To implement this on your own publication, first copy the below code to a plain-text editor such as Notepad++ or TextWrangler:

<!DOCTYPE html>
<html>
<head>
    <title>YOUR_TITLE_HERE</title>

    <style id="custom_lb_css" type="text/css"></style>

    <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <script>
        var viewer = new com.zmags.api.Viewer();
        viewer.setPublicationID("PUB_ID_HERE");
        viewer.setParentElementID("myViewerContent");
        viewer.show();

        lb_styles = [
            // Place styles below, inside "" followed by a comma.
            "style_0_here",
            "style_1_here",
            "style_2_here",
        ];

        url_list = [
            // List each URL to apply styles to, preceded by the desired style number.
            // One URL per line. Surround numbers and styles with "" followed by commas.
            // The first style in "lb_styles" is number 0.
            "0", "url_0_here",
            "1", "url_1_here",
            "1", "url_2_here",
            "2", "url_3_here",
        ];

        lb_style = document.getElementById('custom_lb_css');
        function restyle(i){
            if(i != -1){ lb_style.innerHTML = lb_styles[i]; }
            else{ lb_style.innerHTML = ""; }
        }

        viewer.addEventListener(com.zmags.api.Viewer.LIGHTBOX_LINK_ACTIVATE, lightbox_open);
        function lightbox_open(event){
            var url = "";
            try{
                url = document.getElementById('cboxLoadedContent').getElementsByTagName('iframe')[0].src;
            }
            catch(err){
                setTimeout(lightbox_open, 50);
            }
            
            if(url != ""){
                restyle(-1);
                for(var i=0; i<url_list.length; i++){
                    if(url_list[i] == url){
                        restyle(url_list[i-1]);
                    }
                }

                if( document.getElementById('cboxContent').style.height != "0px"
                && document.getElementById('cboxContent').style.width != "0px"
                && (document.getElementById('cboxContent').style.height != document.getElementById('cboxLoadedContent').style.height
                || document.getElementById('cboxContent').style.width != document.getElementById('cboxLoadedContent').style.width)){
                    setTimeout(function(){
                        document.getElementById('cboxContent').style.height = document.getElementById('cboxLoadedContent').style.height;
                        document.getElementById('cboxContent').style.width = document.getElementById('cboxLoadedContent').style.width;
                        document.getElementById('cboxWrapper').style.height = "1px"; document.getElementById('cboxWrapper').style.width = "1px";
                        document.getElementById('colorbox').style.height = "1px"; document.getElementById('colorbox').style.width = "1px";
                    }, 200);
                }

            }
        }
    </script>
</head>
<body>
    <div id="myViewerContent" style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
</body>
</html>

Save the code as an HTML file by ending its file name with ".html" and surrounding with quotes. After that's done, there are several areas you'll need to fill in:

Title and Publication ID

In the code, fill in the desired title to be displayed where you see YOUR_TITLE_HERE. Also fill in the ID of your publication where you see PUB_ID_HERE. The publication ID can be found by clicking on your publication's name in the "All Publications" list of the Zmags Publicator.

Style List

The lb_styles list is where all styles to be used by the publication are placed.
We recommend creating these beforehand using our Lightbox CSS Generator, or copying them from our Lightbox Style Examples page.

Place one style per line, inside the quotes as indicated by where style_#_here is written. You may create additional lines using the same format.

URL List

The url_list is where you select what styles to apply and to which URLs. In the first part of each line, select a number corresponding to the desired style. The first entry in your lb_styles list is number 0, the second entry is number 1, and so on.

In the second part of each line, enter the URL that you would like to apply the style to. Use the full URL, identical to what is used for the corresponding link in Zmags Enriched. (It would be best to copy the URL directly from Zmags Enriched to the position marked by url_#_here.)

If you would like to apply different styles to links which are using the same URL, simply differentiate the links using a URL parameter. For example, this URL being used in two links...
    http://www.zmags.com/
could instead have a separate URL (that goes to the same place) for each link:
    http://www.zmags.com/?style1
    http://www.zmags.com/?style2
Simply use the above URLs in both Zmags Enriched and the url_list.

Place one URL per line. You may create additional lines using the same format.

Finishing Up

Once all areas are filled in, just save the code and host it somewhere online. Navigate to that location using your favorite web browser to try it out!

Related articles