What is the HTML5 Viewer?
Live Demo
List of included features
Embedded Viewer API
Lightbox Popups
Mini "social sharing" web toolbar
Table of Contents and Archive
Fullscreen Button
Mobile device handling code
Dynamic Deeplinking
VERGE Viewer CSS
The following examples use the Zmags Embedded Viewer API. It assumes that readers have general knowledge of embedding the viewer already. If this is not the case, feel free to click the link above for more information.
The new Zmags HTML5 viewer has just been released, and represents the next step in our ongoing effort to bring you the most platform independent and best reader experience possible. The HTML5 viewer is the very same viewer seen when using a mobile device to view a publication with the new VERGE viewer, and is now available for desktop as well. As the name suggests, this viewer is rendered entirely in HTML5, so no Flash is required.
The purpose of this demon is to show several things you can do with the new HTML5 viewer using our Javascript embedded viewer API. This demo works both on Desktop and iPad, but used a slightly different layout when a mobile device is detected, for readability's sake.
Live Demo
Click here to view the example in action!
Click here to download the example code.
List of included features:
The example linked above contains a large number of special features and functionality, more so than most publications will require. When creating your own page, it is suggested to select only those features specifically relevant to your needs.
- Embedded Viewer API
- Lightbox popups
- Mini "social sharing" toolbar
- Collapsible Table of Contents and Archive
- Custom fullscreen button, lightbox-compatible
- Mobile device handling code
- Dynamic deeplinking
- CSS code to match the VERGE Viewer
See the appropriate section below for more information.
Embedded Viewer API
It is this code which makes all the other features possible! By embedding your publication in an HTML page using the embedded viewer API, you are able to add on other features using Javascript and HTML.
To learn more, refer to the following tutorial: Embedded Viewer API
Lightbox Popups
When first opening up the demo, you will be directed to the lightbox links page. Click any of the link buttons to open a lightbox popup. These boxes can embed any external HTML content, opening up a variety of new options for end-user interactivity.
To learn more, refer to the following tutorial: Lightbox Popups
Mini "social sharing" web toolbar
A custom "share by email button", along with a Facebook "like" button and a Twitter "tweet" button have been wrapped together using CSS intended to make it mesh nicely with the VERGE viewer (see "VERGE Viewer CSS" below).
To learn more, refer to the following tutorial: Social Sharing Toolbar
Table of Contents and Archive
Using functions available in the embedded viewer API, it is possible to create HTML-based links to pages and publications. These functions can be implemented to create a Table of Contents or magazine Archive that looks however you would like it to look. In this showcase, a Javascript function is used to show and hide the TOC and Archive when clicked, to save space.
To learn more, refer to the following tutorial: HTML Table of Contents and Archive
Fullscreen Button
When clicked, the custom full screen button expands the section of the webpage containing the Viewer to fill the entire window. It also moves the other custom overlay buttons to appropriate positions at the edges of the window. When the button is clicked again, everything is moved back to its original location.
To learn more, refer to the following tutorial: Javascript Based Fullscreen
Mobile device handling code
The demo page is able to detect when it is being viewed by an iPod, iPad, or Android device. When this is the case, it rearranges certain elements for better readability. It also handles rotating / re-orienting of the screen to switch from two-page to single-page viewing mode.
Dynamic Deeplinking
Javascript code in this example page allows the URL to be updated with an appropriate page number each time a page is turned. Using a URL with the number at the end allows you to link directly to that page of the publication. Additionally, changing the page number in the URL will turn the page.
To learn more, refer to the following tutorial: Dynamic Deeplinking an Embedded Viewer
VERGE Viewer CSS
For the sake of maximizing reading space, the VERGE Viewer forgoes certain more bulky interface options previously featured in the Zmags Viewer, such as the magazine archive, table of contents, and "custom button". If desired, it is possible to recreate these things using HTML (see "Table of Contents and Archive" above).
If you want the added components to match your VERGE viewer, the following CSS code may be used in the <head> of your HTML document:
<style type="text/css">
.verge_overlay{
position:fixed;
background:black;
background:rgba(0,0,0,0.6);
color:white;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
border-radius:20px;
padding:10px;
z-index:1;
}
.verge_overlay a{
color:white;
text-decoration:none;
font-size:small;
}
.verge_overlay br{line-height:3px;}
</style>
Once you have that, apply the CSS to any given <div> in the HTML file by adding class="verge_overlay" to the tag, like so:
<div id="custom" class="verge_overlay" style="position:absolute; left:auto; top:5px; right:5px;">
<a style="font-size:medium;" href="https://publicatorcommunity.zmags.com/hc/en-us/articles/115002482723" target="_blank">Custom<br>button!</a>
</div>