HTML5 Showcase

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.

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>