Opening a Lightbox from a Widget – Zmags Publicator Community

The Zmags embedded viewer API makes it easy to open light box content using code within your HTML5 widgets. Here's a simple example:

(Click here to see the example!)

Screenshot_2022-01-18_at_7.12.34_PM.png

Here's the code used by the widget page:

<html>
<head>
    <script src="//secure.api.viewer.zmags.com/widgets/iframe.js" type="text/javascript"></script>    
    <script type="text/javascript">
        // Set up interface with the embedded viewer API.
        var Iframe = com.zmags.api.widgets.Iframe;
        var API = Iframe.getViewerAPI();

        // Open the light box when button is clicked.
        function openLB(url){
            API.openLightbox(url);
        }
    </script>
</head>
<!-- Place the content of the widget in the body as usual. -->
<body style="text-align:center; background:lightgray;">
    <br><br>
    <span style="color:red; font-size:x-large; font-weight:bold; text-decoration: blink;">This is an HTML5 widget!</span><br>
    <br><br>
    <!-- Include something that can be clicked to open the light box. -->
    <span onclick="openLB('YOUR_URL_HERE');" style="background:lightgreen; border:solid black 1px; padding:10px; border-radius: 15px; -moz-border-radius: 15px;">Click here to open a lightbox.</span>
</body>
</html>

To use this example, copy the above code to an HTML file and replace the <body> section with your own widget content. Add a call to the openLB() function somewhere as a clickable object, as demonstrated with the <span> in our example. Then, host the HTML online and point to it using your HTML5 widget.

The only other requirement is to have a standard light box link somewhere else in the publication, because without this your viewer won't know to load the light box code. If you do not have any light box links elsewhere, you can "fake it" by simply creating a small link outside of one of the pages of the publication.

Screenshot_2022-01-18_at_7.13.41_PM.png

Related articles