In this article we will share examples of embedding Publicator in your website.
An embedded viewer is a Javascript component which allows you to easily place your Zmags publication inside a web page on your site. We also offer a feature-rich API where you can utilize Javascript calls to interact with your publication in a variety of ways.
Example 1:
Branding the viewer to company design and adding past issues to a drop down(up) menu.
Live example: www.woodfloorbusiness.com
To achieve this embedded look, please use the below code example. You can copy this code to start a new file and adjust it to contain your publication and images.
At the start of the file we import all the dependencies we have to embed the publications. Those include Publicator API Viewer API script source, bootstrap library (used for responsive styling), jQuery (used to manipulate DOM elements), and others.
Then we start with the script that sets the publication ID, then initializes the viewer by calling the Viewer script. Next script manages page labels to determine the appropriate page number label(s) and apply each time a page is turned.
Afterwards we find the container that will house the viewer by using jQuery and set up the publication to be displayed in that container.
And the last two part of code add the branded imagery on top of the publication, adds the buttons on top and lastly adds a drop down that once manually populated shows your past issues to help users discover further content.
<html>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://secure.api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "a281f309-763b-4a38-b0c7-ab2c9ebee530", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
</head>
<body style="background-color: #ECECEC;">
<script>
var Publication_ID = "a56899b8";
var latest_publication_first = true; // Use this setting to choose list order.
var default_pub = 0;
var viewer = new com.zmags.api.Viewer();
loadPub(Publication_ID, viewer);
// 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.
function loadPub(id, newviewer){
$("#myViewerContent").html("");
newviewer.setPublicationID(id);
newviewer.setParentElementID("myViewerContent");
newviewer.show();
// Adjust Page numbering
var offset = 0; // Add or subtract this amount from all (non-special) page numbers.
var special = [ // Map special labels to specific pages.
]
newviewer.oncurrentpageschange = function(){ getLabels(newviewer, offset, special, 'pagenum')};
viewer = newviewer;
}
</script>
<img id="logo" src="http://woodfloorbusiness.com/images/digitalissues/premiumpartners/PremiumPartnersLogoBar_WFB.jpg" style="position: fixed; top: 1%; left: .6%; height: 5.8%;z-index:5;">
<img id="next" onclick="viewer.search();" src="http://woodfloorbusiness.com/images/digitalissues/icons/search.png" style="position: fixed; top: 2.5%; right: 2%; height: 3%;z-index:5;">
<img id="prev" onclick="viewer.gotoPreviousPages();" src="http://woodfloorbusiness.com/images/digitalissues/icons/left_6.png" style="position: fixed; top: 96%; left: 45%; height: 3%;z-index:5;">
<div id="pagenum" style="position:absolute; top: 96%; left:50%; margin-left:-150px; height:22px; width:300px; z-index:1; border-radius:10px 10px 0px 0px; color:black; font-size:12px; font-weight:bold; font-family:Arial; text-align:center; line-height: 22px;"></div>
<img id="next" onclick="viewer.gotoNextPages();" src="http://woodfloorbusiness.com/images/digitalissues/icons/right_6.png" style="position: fixed; top: 96%; right: 45%; height: 3%;z-index:5;">
<img id="download" onclick="viewer.downloadPDF();" src="http://woodfloorbusiness.com/images/digitalissues/icons/download.png" style="position: fixed; top: 96%; right: 2%; height: 3%;z-index:5;">
<img id="print" onclick="viewer.print();" src="http://woodfloorbusiness.com/images/digitalissues/icons/print.png" style="position: fixed; top: 96%; right: 5%; height: 3%;z-index:5;">
<span class="st_sharethis_custom" ><img id="next" src="http://woodfloorbusiness.com/images/digitalissues/icons/share.png" style="position: fixed; top: 96%; right: 8%; height: 3%;z-index:5;"></span>
<div class="dropup" style="position: fixed; top: 95.5%; left: 1%; height: 3%;z-index:5;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="color: #fff; background-color: #7EC242; border-color: #000000;">Past Issues
<span class="caret" ></span>
</button>
<!-- Table of Contents - manually set -->
<!-- The structure should be
<li><a onclick="loadPub('PUBLICATION ID', new com.zmags.api.Viewer());">PUBLICATION NAME</a></li>
All that's needed is to replace the ID and Name where indicated above-->
<ul class="dropdown-menu">
<li><a onclick="loadPub('f429fc2b', new com.zmags.api.Viewer());">Feb/Mar 2017</a></li>
<li><a onclick="loadPub('ed64beaa', new com.zmags.api.Viewer());">Dec 2016/Jan 2017</a></li>
<li><a onclick="loadPub('31ff7962', new com.zmags.api.Viewer());">Resource Book 2017</a></li>
<li><a onclick="loadPub('39fb7a66', new com.zmags.api.Viewer());">Oct/Nov 2016</a></li>
<li><a onclick="loadPub('15122922', new com.zmags.api.Viewer());">Aug/Sept 2016</a></li>
<li><a onclick="loadPub('fdadf6ea', new com.zmags.api.Viewer());">June/July 2016</a></li>
<li><a onclick="loadPub('550301a7', new com.zmags.api.Viewer());">April/May 2016</a></li>
<li><a onclick="loadPub('9068a5ae', new com.zmags.api.Viewer());">Feb/Mar 2016</a></li>
<li><a onclick="loadPub('487b1ae2', new com.zmags.api.Viewer());">Dec 2015/Jan 2016</a></li>
<li><a onclick="loadPub('48371ae7', new com.zmags.api.Viewer());">Resource Book 2016</a></li>
</ul>
</div>
<div id="myViewerContent" style="position:absolute; top:8%; left:0px; height:85%; width:100%;"></div>
</body>
</html>
Example 2:
Minimalistic viewer embed design that gets rid of most on-publication controls and buttons and replaces them with inconspicuous buttons. Only download button is left with page navigation control that combines showing page number with ability to type in any page number to navigate to.
Live example: Minimalistic Test
Here the embed code again starts with importing all the necessary stylesheets and libraries. In this example we use jQuery, Google fonts and Google material design font icons.
Next part of the code is styling section in CSS, this part mostly sets up the various page elements that complement the viewer, such as the top bar, the bottom bar and elements on both bars such as download button, or page numbering/input field.
Then comes the HTML layout itself, which in this example is very simple since it is a minimalistic design. The layout consists of a wrapper which contains all the visible elements, within that there are the header, viewer and footer elements.
Following that there are javascript functions in this order:
- Function adding and update page number in the top element within header bar
- Function that listens for inputs in the same element and flips the page to the page nr input
- The setting up of viewer instance which is imported from Publicator source
- DOM listeners that either manage the element sizes or trigger functions depending on events within the page
<!DOCTYPE html>
<html>
<head>
<title>Minimalistic embedding example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
html,body {
height:100%;
margin: 0 !important;
font-family: "Roboto";
font-weight: 300;
}
a{
text-decoration: none;
color: black;
}
a:hover{
font-weight: bold;
}
#headerDiv{
width: 100%;
height: 50px;
}
#wrapper{
width: 100%;
height: 100%;
}
#headerImage{
display: inline-block;
left: 10;
top: 0;
height: 50px;
width: auto;
}
#myViewerContent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
margin-top: 50px;
margin-bottom: 30px;
}
#footerDiv{
position: absolute;
text-align: center;
bottom: 0;
left: 0;
height: 30px;
width: 100%;
margin-bottom: -5px;
}
#headerTitle{
position: absolute;
top: 0;
color: #636363;
margin-left: 70px;
margin-top: -6px;
}
#download{
width: 50px;
height: 50px;
text-align: center;
background-color: white;
margin: 0 auto;
padding-top: 12px;
color: #636363;
transition: all 1s;
display: inline-flex;
}
#download:hover{
background-color: #636363;
transition: all 1s;
color: white;
}
#headerNav{
width: 150px;
position: absolute;
top: 0;
left: 50%;
display: flex;
}
.material-icons.md-36 {
font-size: 36px;
color: #636363;
}
.material-icons.md-36:hover{
color: white;
}
#downloadLink{
width: 50px;
height: 50px;
}
#pageInput{
width: 100px;
height: 50px;
background-color: #636363;
position: relative;
display: inline-flex;
border-style:hidden;
text-align: center;
color: white;
transition: all 1s;
}
/* do not group these rules */
*::-webkit-input-placeholder {
color: #bfbfbf;
font-size: 18px;
}
*:-moz-placeholder {
/* FF 4-18 */
color: #bfbfbf;
font-size: 18px;
}
*::-moz-placeholder {
/* FF 19+ */
color: #bfbfbf;
font-size: 18px;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: #bfbfbf;
font-size: 18px;
}
#pageInput:focus{
background-color: #3d3d3d;
transition: all 1s;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="headerDiv">
<img id="headerImage" src="./mworld-logo.png" >
<div id="headerTitle"><h3> Minimalistic Viewer API Example</h3></div>
<div id="headerNav">
<div id="download" onclick="viewer.downloadPDF();"><a href="#"><i class="material-icons md-36"><div id="downloadLink">file_download</div></i></a></div>
<input id="pageInput" type="text" placeholder="1">
</div>
</div>
<div id="myViewerContent"></div>
<div id="footerDiv"><center><a href="http://www.zmags.com">Secondary Link In Footer</a></center></div>
</div>
<!-- End of the wrapper element -->
<script type="text/javascript" src="http://api.viewer.zmags.com/viewer/viewer.js"></script>
<script>
function addPageNr(){
var pageNr;
viewer.getCurrentPages(function(data){
console.log(data.firstPage);
pageNr = data.firstPage;
$('#pageInput').attr('placeholder', pageNr);
});
}
function changePages(){
let pageInput = parseInt($('#pageInput').val());
viewer.gotoPage(pageInput);
$('#pageInput').val('');
}
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("7f3bebec");
viewer.setParentElementID("myViewerContent");
viewer.show();
addPageNr();
viewer.oncurrentpageschange = function(event){
addPageNr();
}
</script>
<script>
var vheight = $('#wrapper').height()-80;
$('#myViewerContent').css({"height": vheight+"px"});
$('.continuousPagePublicationViewOverlay').css({"background-color": "#636363"});
$(window).on('resize',function(){
var vheight = $('#wrapper').height()-80;
$('#myViewerContent').css({"height": vheight+"px"});
$('.continuousPagePublicationViewOverlay').css({"background-color": "#636363"});
});
document.body.addEventListener('click', function(){
addPageNr();
console.log('triggering page nr update');
}, true);
$('#pageInput').keyup(function (e) {
if (e.keyCode === 13) {
changePages();
}
});
</script>
</body>
</html>
Comments
0 comments
Please sign in to leave a comment.