When using an embedded viewer to display your publication, it is possible to limit which pages your readers have access to. This could be used to display just part of the publication as a sample, or to divide one larger publication up across several embedded viewer pages.
Here is the code used in our basic example:
<!DOCTYPE html> <html> <head> <title>Limit Pages Demo</title> </head> <body> <div id="myViewerContent" style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div> <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(); <!-- Limit viewable pages: X = minimum viewable page, Y = maximum. --> var X = 5, Y = 10; viewer.gotoPage(X); viewer.oncurrentpageschange = function(event){ viewer.getCurrentPages(function(data){ if(data.firstPage < X){ viewer.gotoPage(X); } else if (data.lastPage > Y) { viewer.gotoPage(Y-1); } }); } </script> </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.)
'X' and 'Y', which in this case are set statically to 5 and 10 may instead be made to be other specific numbers, or set programmatically by other code in your page.
"viewer.gotoPage(X);" and "viewer.gotoPage(Y-1);" respectively are the actions taken when the reader tries to turn to a page before the allowed range or after it. Additional actions could be added here, such as some kind of pop up alert or advertisement, or the action taken could be changed entirely, such as redirecting to a separate page on your website.
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.
Comments
0 comments
Please sign in to leave a comment.