JavaScript Based Fullscreen – Fastr Publicator Community

Approach 1: Using CSS
Approach 2: Verge Viewer CSS
Approach 3: Using a Popup Window

The default fullscreen functionality available in the Zmags Viewer will be closed when overlays such as dynamic product windows and light box popups are opened. This is neccesary because otherwise the fullscreen layer would cover the popup content in most browsers. This article details several of the workarounds available:

1: One option is to use CSS, which can switch a viewer using only part of the window to filling the entire window instead. If your reader does not have their window full-screened, or if they have many browser toolbars filling up space, however, this may not cover as much of the screen as you would like. Requires use of a separate button not attached to the Viewer toolbar.

2: Using CSS much like in method 1, except in the Verge viewer you may alter the behavior of the existing fullscreen button, instead of creating a new separate one.

3: The second option is to use a popup window that mirrors the content of your non-fullscreened publication. This will always fill the entire screen, but may run into some security issues with certain web browsers, particularly Internet Explorer.

Both approaches have been detailed below for your convenience.

Approach 1: Using CSS

In the CSS implementation, just one HTML page is required:

<!DOCTYPE html>
<html>
<head>

<title>YOUR TITLE HERE</title>

<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();

    var viewerStyle = "";
    function fullscreen_mode(){
        var viewerDiv = document.getElementById("viewerDiv");
        if(viewerStyle == ""){
            document.body.style.overflow = "hidden";
            viewerStyle = viewerDiv.style.cssText;
            viewerDiv.style.cssText = "position:fixed; top:0px; left:0px; height:100%; width:100%; z-index:9001";
        }
        else{
            document.body.style.overflow = "auto";
            viewerDiv.style.cssText = viewerStyle;
            viewerStyle = "";
        }

        viewer.resize();
    }
</script>
</head>
<body>

<div id="viewerDiv" style="position:fixed; width:800px; height:600px;">
    <div id="myViewerContent" style="position:absolute; width:100%; height:100%;"></div>
    <div id="fs_button" style="position:absolute; top:10px; right:10px; z-index:1;"><a href="#" onclick="fullscreen_mode();"><img src="./images/fstoggle.png" style="opacity:0.6; border:0;"></div><br />
</div>

</body>
</html>

To implement this on your own site, simply create an HTML file containing the code above. You will also need to download the close button image and place it in the same folder: (right-click here and choose "save target as")

Fill in the bold red text with your own title and publication ID. You may also choose the size and position of the publication on your page by customizing the viewer div's CSS. This is found to the right of the id="viewerDiv" tag. Once that's done, place the your site and open it using your favorite web browser..

An example can be seen here.

A tutorial which uses this approach in combination with device specific code can enter full screen mode automatically for mobile devices. See here for more information: Handling Mobile Devices

Approach 2: Verge Viewer CSS

Once again, this example is for use with the Verge viewer only. It will not work with the Zmags Standard Viewer. As with the first example, just one HTML page is required:

<!DOCTYPE html>
<html>
<head>

<title>YOUR TITLE HERE</title>

<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.setFullscreenMode(com.zmags.api.Viewer.FullscreenMode.API_ONLY);
    viewer.addEventListener(com.zmags.api.Viewer.TOOLBAR_BUTTON_ACTIVATE, toolbarButtonActivateHandler);
    viewer.show();

    var viewerStyle = "";
    function toolbarButtonActivateHandler(event){
        if (event.buttonID === "fullscreen"){
            var viewerDiv = document.getElementById("myViewerContent");
            if(viewerStyle == ""){
                document.body.style.overflow = "hidden";
                viewerStyle = viewerDiv.style.cssText;
                viewerDiv.style.cssText = "position:fixed; top:0px; left:0px; height:100%; width:100%; z-index:9001;";
            }
            else{
                document.body.style.overflow = "auto";
                viewerDiv.style.cssText = viewerStyle;
                viewerStyle = "";
            }

            viewer.resize();
        }
    }
</script>
</head>
<body>

<div id="myViewerContent" style="width:800px; height:600px;"></div>

</body>
</html>

To implement this on your own site, simply create an HTML file containing the code above. Fill in the bold red text with your own title and publication ID. You may also choose the size and position of the publication on your page by customizing the viewer div's CSS. This is found to the right of the id="myViewerContent" tag. Once that's done, place the your site and open it using your favorite web browser..

An example can be seen here.

Approach 3: Using a Popup Window

In this implementation, we will be using two separate HTML pages, and some JavaScript slight-of-hand to make them appear as one cohesive whole. The only caveat here is that this approach requires popups to function, so the first time a reader uses the fullscreen they will be prompted to allow popups for the page.

The two pages we'll be using will be referred to as "page1" and "page2":

page1: This is the non-fullscreen page; the publication viewer and button may be sized and positioned however you desire. Other content may be added in surrounding areas. For URL parsing purposes, the name of this file must end in the number 1.
page2: This is the fullscreen page; the viewer will take up 100% of the window. For URL parsing purposes, the name of this file must end in the number 2.

What follows is the HTML code of page1:

<!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>
<script>
    // Used to fetch page numbers from the URL parameter.
    function getUrlVars(name)
    {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if(results == null)
            return "";
        else
            return results[1];
    }

    // Sets up the Zmags viewer.
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();

    // This block of code displays the page specified in the URL.
    if(window.location.hash != ""){ viewer.gotoPage(window.location.hash.replace("#","")); }
    window.onhashchange = function(event){ viewer.gotoPage(window.location.hash.replace("#","")); }

    // This block of code updates the URL when pages are turned.
    viewer.oncurrentpageschange = function(event){
        viewer.getCurrentPages(function(data){
            window.location.hash = data.firstPage;
        });
    }

    // This block of code handles the custom fullscreen functionality.
    function fullscreen_mode(){
        viewer.getCurrentPages(function(data){
            var filename = window.location.pathname.split( '/' ).pop();
            var fsURL = filename.substring(0, filename.indexOf("1.html")).concat("2.html#").concat(data.firstPage);
            var w = window.open(fsURL,'FullscreenTest','width=availWidth,height=availHeight');
            w.focus();
        });
    }
</script>

<div id="myViewerContent" style="width:800px; height:600px;"></div>
<button onclick="fullscreen_mode();">Open Fullscreen</button><br />
</body>
</html>

Here is the HTML code of page2:

<!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 onLoad='maxwindow();'>

<script>
    // Close this window if the original (non-fullscreen) window is clicked.
    self.opener.onfocus = function(){ window.close(); };

    // Used to fetch page numbers from the URL parameter.
    function getUrlVars(name)
    {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if(results == null)
            return "";
        else
            return results[1];
    }

    // This block of code maximizes the window on load..
    function maxwindow(){
        window.moveTo(0, 0);
        window.resizeTo(screen.availWidth+8, screen.availHeight+8);
    }

    // Sets up the Zmags viewer.
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();

    // This block of code displays the page specified in the URL.
    if(window.location.hash != ""){ viewer.gotoPage(window.location.hash.replace("#","")); }
    window.onhashchange = function(event){ viewer.gotoPage(window.location.hash.replace("#","")); }

    // This block of code updates the URL when pages are turned.
    viewer.oncurrentpageschange = function(event){
        viewer.getCurrentPages(function(data){
            window.location.hash = data.firstPage;
        });
    }

    // This block of code synchronizes page turns on the main window to page turns on this window.
    viewer.oncurrentpageschange = function(event){
        viewer.getCurrentPages(function(data){
            var newURL = document.URL;
            newURL = newURL.substring(0, newURL.indexOf("2.html#")).concat("1.html#").concat(data.firstPage);
            if(self.opener.location != newURL){
                self.opener.location.replace(newURL);
            }
        });
    };
</script>

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

To implement this on your own site, simply create two HTML files with the above contents. Fill in the bold red text with your own title and publication ID.

The files must have the same name, except for ending in 1 and 2, respectively. Examples include:
- "page1.html" and "page2.html"
- "mypublication1.html" and "mypublication2.html"
- "any_name_here_1.html" and "any_name_here_2.html"
Once that's done, place these files in the same folder on your site and link to number 1.

An example can be seen here.

Related articles