Requirements
Instructions for Use
Configurable Settings
Basic Example
Fancy Example
Publications using the Standard Viewer have the benefit of optionally including an Archive to showcase a specified list of other publications. These could be previous editions in the same magazine, other offerings you'd like to draw attention to, or any other publications on the account you'd like to include. Verge Viewers do not have this functionality built-in, but the Schedule API can now be used to achieve a very similar effect:
Requirements
- A schedule should be set up containing the desired publications. The specific dates scheduled do not matter, only the publication order.
- In addition to the provided HTML, the following JS files are needed as well:
- Somewhere to host the files online, such as a company website.
Instructions for Use
1) Select "Basic Example" or "Fancy Example" below. Start by copy-pasting the provided code to an editor such as Notepad++ or TextWrangler.
2) Be sure to fill in the schedule_id and api_key, found just below the <body> tag in the code. Your schedule ID can be found on the 'Schedules' page in the Publicator, and the api key can be found on the "Account Settings" page (under 'Administration').
3) Save the file with a file name ending in .html and surrounded by quotes, like so: "archive_example.html"
4) If you have not done so already, download the two JS files from the 'Requirements' section above. Just right-click and choose "Save As" for each of them.
5) Host the HTML and the two JS files in the same folder on your website, and then navigate your web browser to the URL of the HTML file to test it out.
Configurable Settings
In addition to the default setup process outlined above, this example also has a number of useful configuration lines that can be used to customize things a bit:
Style Options:
Look for these options near the top of the document, in the <style> section.
- body - background: (Basic only) Choose the background color for the page.
- body / .thumb / .title - margin: (Basic only) Choose the amount of space to reserve around page edges, thumbnails, and labels.
- .thumb - height and width: Choose the maximum size for thumbnails.
- .title - color: Choose a text color for thumbnail labels.
- .title - font-size: Choose a text size for thumbnail labels.
- .title - white-space: Comment out line to use additional space for long titles. Uncomment it to cut them short instead.
Script Options:
Look for these options just below where you set the schedule_id and api_key:
- latest_publication_first: Choose true or false to select the list order.
- horizontal_list: Choose true for horizontal or false for vertical layout.
- link_target: (Basic only) Choose _blank to open publications a new window, or _top to open them in the current window.
- default_pub: (Fancy only) Choose a publication to display initially; 0 is the first publication, and the total number of publications minus one is the last one.
Basic Example
In this example, we use the schedule API to construct the archive list by itself, without loading the publication on the same page. When a thumbnail is clicked, the associated publication will be loaded in a new window.
(Click here to view the example!)
<!DOCTYPE html>
<html>
<head>
<title>Schedule Thumbnails Demo</title>
<style type="text/css">
body {
/* Choose a background color and margin size. */
background: lightgray;
margin: 5px;
}
.thumb {
/* Select a maximum height and width to allot for each thumbnail. Set margin size here as well. */
height: 125px;
width: 100px;
margin: 5px;
/* Do not edit these properties. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.title {
/* Choose a font size. Place other font-related settings here if desired. */
font-size: 14px;
text-align: center;
margin: 5px;
/* Uncomment below line to cut off long titles rather than use additional space. */
/* white-space: nowrap; */
/* Do not edit these properties. */
display: block;
overflow: hidden;
}
</style>
<script src="jquery-1.9.0.js"></script>
<script src="jquery.xdomainrequest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var schedule_id = "45871322"; // The ID of the schedule to load.
var api_key = "fd5146ec-13ae-4c03-88a4-c68d0a5c2e9f"; // The API key from your Publicator account.
var latest_publication_first = true; // Use this setting to choose list order.
var horizontal_list = true; // Use this setting to choose list orientation.
var link_target = "_blank"; // Choose where to load publications clicked.
// !!! Do not edit code below this line. !!!
$.ajax({
url: "http://api.viewer.zmags.com/schedules/" + schedule_id + "?key=" + api_key,
type: "GET"
})
.done(function(data){
$.each(data.scheduleEntries, function(index, entry){
// Decide list order, load the thumbnail for each publication.
var place = "";
if(latest_publication_first){
place = "last";
$('body').append('<div class="container"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
}
else{
place = "first";
$('body').prepend('<div class="container"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
}
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
// Switch containers to horizontal placement if requested.
if(horizontal_list){ $('.container:' + place).css('float', 'left'); }
// Load the publication title below each thumbnail.
$('.thumb:' + place).after('<span class="title"></span>');
$('.title:' + place).css("width", $('.thumb:' + place).css("width"));
$('.title:' + place).append(entry.publicationName);
// Set up publication links.
$('.container:' + place).click(function(){
window.open("http://viewer.zmags.com/publication/" + entry.publicationID, link_target);
});
});
});
</script>
</body>
</html>
Fancy Example
In this example, we use the schedule API to construct the archive list and also load the publication using an embedded viewer. When a thumbnail is clicked, the embedded viewer switches to the publication selected. The archive has been formatted to match the appearance of the Verge Viewer.
(Click here to view the example!)
<!DOCTYPE html>
<html>
<head>
<title>Schedule Thumbnails Demo</title>
<style type="text/css">
#archive {
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 10px 0px;
z-index:1;
overflow-x:hidden;
overflow-y:auto;
max-height:95%;
}
.thumb {
/* Select a maximum height and width to allot for each thumbnail. Set margin size here as well. */
height: 125px;
width: 100px;
/* Do not edit these properties. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.title {
/* Choose a font size. Place other font-related settings here if desired. */
color:white;
font-size:small;
text-align: center;
margin-bottom: 10px;
/* Uncomment below line to cut off long titles rather than use additional space. */
white-space: nowrap;
/* Do not edit these properties. */
display: block;
overflow: hidden;
}
</style>
<script src="jquery-1.9.0.js"></script>
<script src="jquery.xdomainrequest.min.js"></script>
<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var schedule_id = "45871322"; // The ID of the schedule to load.
var api_key = "fd5146ec-13ae-4c03-88a4-c68d0a5c2e9f"; // The API key from your Publicator account.
var latest_publication_first = false; // Use this setting to choose list order.
var horizontal_list = false; // Use this setting to choose list orientation.
var default_pub = 0; // Which publication to show first? 0 = most recent
// !!! Do not edit code below this line. !!!
// Loads publication with the specified id into embedded viewer.
function loadPub(id){
$("#myViewerContent").html("");
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID(id);
viewer.setParentElementID("myViewerContent");
viewer.show();
}
$.ajax({
url: "http://api.viewer.zmags.com/schedules/" + schedule_id + "?key=" + api_key,
type: "GET"
})
.done(function(data){
// Load the default publication.
loadPub(data.scheduleEntries[default_pub].publicationID);
$.each(data.scheduleEntries, function(index, entry){
// Decide list order, load the thumbnail for each publication.
var place = "";
if(latest_publication_first){
place = "last";
$('#archive').append('<div class="container"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
}
else{
place = "first";
$('#archive').prepend('<div class="container"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
}
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
// Switch containers to horizontal placement if requested.
if(horizontal_list){ $('.container:' + place).css('float', 'left'); }
// Load the publication title below each thumbnail.
$('.thumb:' + place).after('<span class="title"></span>');
$('.title:' + place).css("width", $('.thumb:' + place).css("width"));
$('.title:' + place).append(entry.publicationName);
// Set up publication links.
$('.container:' + place).click(function(){
loadPub(entry.publicationID);
});
});
});
</script>
<!-- This will contain all elements for the archive. -->
<div id="archive"></div>
<!-- This will contain the embedded viewer and display the publication selected. -->
<div id="myViewerContent" style="position:absolute; top:0px; left:0px; height:100%; width:100%; z-index:-1;"></div>
</body>
</html>