Custom Page Numbering – Fastr Publicator Community

When creating a PDF in Adobe, it is possible to set up all sorts of fancy page-numbering schemes, starting or ending with different sets, offsetting pages, and so on. This article shows how to customize the current page numbering within a Viewer using our API:
- If you're using a Standard Viewer, you can use the built-in settings to shift page numbers.
- If you're using a Verge Viewer, you can add labels to the page number tab for given pages.

More customization is possible if you use the embedded viewer API instead:

(Click here to see the examples!)

As you can see, by using the API, our examples are able to offset pages, apply custom labels, and so on all in the same viewer. This is possible regardless of whether the Verge or Standard Viewer is used, and while the formatting of the "page number" div is set up to match the Verge viewer, it can be given whatever appearance you would like using CSS.

Here's the code you'll need to use custom numbering for your own publication:

<!DOCTYPE html>
<html>
<head>
    <title>Custom Page Numbering</title>    
    <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
    <script>
        // Determine the appropriate page number label(s) and apply each time a page is turned.
        function getLabels(viewer, offset, special, labelID){
            viewer.getCurrentPages(function(data){
                var pageNums = [data.firstPage, data.lastPage];
                for(i=0; i<pageNums.length; i++){ // Do this for left and right page of spread.
                    for(j=0; j<special.length; j=j+2){ // Check page number against special table.
                        if(pageNums[i] == special[j]){ // Apply special label, if any.
                            pageNums[i] = special[j+1];
                        }
                    }
                    
                    if(typeof pageNums[i] != "string"){ // If page number isn't special, apply offset.
                        pageNums[i] = (pageNums[i] + offset).toString();
                    }
                }
                if(pageNums[0].trim() == pageNums[1].trim()) { // For one page viewers, display just one number.
                    document.getElementById(labelID).innerHTML = pageNums[0];
                } else if(pageNums[0].trim() != "" && pageNums[1].trim() != ""){ // If neither page label is blank, separate with a dash.
                    document.getElementById(labelID).innerHTML = pageNums[0] + " - " + pageNums[1];
                } else { // If one label is blank, we don't need the dash.
                    document.getElementById(labelID).innerHTML = pageNums[0] + "" + pageNums[1];
                }
            });
        }
    
        // Set up the viewer.
        var viewer = new com.zmags.api.Viewer();
        viewer.setPublicationID("PUB_ID_HERE");
        viewer.setParentElementID("viewer");
        viewer.show();
        var offset = -3; // Add or subtract this amount from all (non-special) page numbers.
        var special = [  // Map special labels to specific pages.
            1, "",
            2, "",
            3, "",
        ]
        viewer.oncurrentpageschange = function(){ getLabels(viewer, offset, special, 'pagenum') };
    </script>
</head>
<body style="background:lightgray;">
    <div id="viewer" style="position:fixed; top:0px; left:0px; height:100%; width:100%;">
        <div id="pagenum" style="position:absolute; bottom:0px; left:50%; margin-left:-150px; height:22px; width:300px; z-index:1; border-radius:10px 10px 0px 0px; background:black; opacity:0.5; color:white; font-size:12px; font-weight:bold; font-family:Arial; text-align:center; line-height: 22px;"></div>
    </div>
</body>
</html>

Simply copy the above code into your favorite text editor, fill in the publication ID (marked in red text above), save as an "HTML" file, and host it to your organization's website. You may also wish to customize the page number div by changing the CSS applied to it, it's marked in red text as well.

There are two important options (marked in blue above) that you will want to edit as well:
    - offset: Simply a number positive or negative, which is added to all pages lacking a special label.
    - special: For each page you want to apply a special label to, add a line to this list. This line should be the page number, followed by a comma, followed by the desired label in quotes, followed by another comma.

When setting up the publication that will be used with this, it would be advisable to disable the built-in page numbering in the viewer settings:
    - In the Standard Viewer, this is done by unchecking "Page number field" on the "Features" tab.
    - In Verge, this is done by selecting "Disable thumbnail navigation / Hide section name and page numbers" under "Navigation elements".

Finally, if your publication will include a fullscreen button, we suggest using the Javascript-Based Fullscreen solution, because otherwise the built-in fullscreen layer will cover up the custom page number div.