Dynamic Deep Linking an Embedded Viewer – Fastr Publicator Community

Rather than setting your embedded viewer up to load the same specific page every time, it is possible to have it load any page specified by the URL, like this:

Ex1: http://www.yourcompanydomain.com/folderstructure/page_name.htm#10
Ex2: http://www.yourcompanydomain.com/folderstructure/page_name.htm&Page=1

Example 1:
If no page is specified, or the specified page does not exist, page 1 will be loaded by default. Here is the HTML you will want to use to implement this solution on your own website:

<!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>
    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.
    var pageturn = false; // Do not alter the hash while pages are still turning.
    if(window.location.hash != ""){ viewer.gotoPage(window.location.hash.replace("#","")); }
    window.onhashchange = function(event){ if(pageturn == false){ 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){
            pageturn = true; // Pages currently turning.
            window.setTimeout(function(){ pageturn = false; }, 100);
            window.location.hash = data.firstPage;
        });
    }
</script>

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

</body>
</html>

Be sure to fill in the bold red text with your own title and publication ID. (Publication ID can be found by clicking the name of your publication in the "All Publications" list while logged into the Zmags Publicator.)

Note: When you are using a page offset, the URL will bring up the page as it is numbered before offsetting, not after. If you have a cover page with no page number, and the second page is labeled '1', that means #2 will load the page labeled 1.

Example 2:
An alternative solution for platforms that may have issues with the "#" character allows for the end of the URL to appear as "&Page=(page_number)" instead. Here is the HTML you will want to use to implement this solution on your own website:

<!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>
    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. -->
    var customParameter = "&Page="

    var url = window.location.toString();
    if(url.indexOf(customParameter) == -1){ChangeUrl('Page 1', '?'+customParameter+'1');}
    else{var pageNumber = url.substring(url.indexOf(customParameter)+parseInt(customParameter.length));console.log(pageNumber);viewer.gotoPage(parseInt(pageNumber));}

    <!-- This block of code updates the URL when pages are turned. -->
    viewer.oncurrentpageschange = function(event){
        viewer.getCurrentPages(function(data){
            ChangeUrl('Page '+data.firstPage, '?'+customParameter+data.firstPage);
        });
    }

    function ChangeUrl(title, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = { Title: title, Url: url };
            history.pushState(obj, obj.Title, obj.Url);
            //alert(window.location.href);
        } else {
            alert("Browser does not support HTML5.");
        }
    }
</script>
<div id="myViewerContent" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
</div>
</body>
</html>