One useful application of our HTML5 widgets is adding animated GIFs to your Zmags publication. These simple files can spice up your magazine with a little bit of color and movement, without needing to involve any complicated Flash development. Please keep in mind however, HTML5 widgets are only available for the HTML5 viewer!
Preparing Your GIF for Zmags
First host your GIF online, either on your own webserver or an image hosting site.
Copy one of the following code samples into a text editor such as Notepad++ or TextWrangler.
If you would like to have your animation loop indefinitely, this simple implementation may be used:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="IMAGE_URL_HERE.gif" style="position:absolute; top:0px; left:0px; height:100%; width:100%;">
</body>
</html>
If you would like to have a non-looping animation play once and stop each time the page is viewed, it is neccesary to use a more sophisticated loader:
<!DOCTYPE html>
<html style="height:100%;">
<head>
<script src="//secure.api.viewer.zmags.com/widgets/iframe.js" type="text/javascript"></script>
<script>
// When the widget's page is turned to, or the window resized, reset the GIF.
var frame = com.zmags.api.widgets.Iframe;
frame.addEventListener(frame.IFRAME_WIDGET_ACTIVATE, function(event){
if(navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > 0){ // Detect IE and apply workaround.
document.getElementById('image').src = document.getElementById('image').src.replace(/\?.*$/,"")+"?x="+Math.random();
}
else{ // Behaviour used for all other browsers.
var img_path = document.getElementById('image').src;
document.getElementById('image').src = "";
document.getElementById('image').src = img_path;
}
});
// When the page is resized or reoriented, resize the GIF accordingly.
function size_content(){
var container = document.getElementById('container'),
image = document.getElementById('image'),
ratio = image.naturalHeight/image.naturalWidth;
var desiredWidth = (window.innerHeight || document.documentElement.clientHeight)/ratio;
if(desiredWidth <= (window.innerWidth || document.documentElement.clientWidth)){
container.style.cssText = "position:fixed; top:0px; left:50%; height:100%;";
container.style.width = String(desiredWidth)+"px";
container.style.marginLeft = String(-0.5*desiredWidth)+"px";
}
else{
var desiredHeight = (window.innerWidth || document.documentElement.clientWidth) * ratio;
container.style.cssText = "position:fixed; top:50%; left:0px; width:100%;";
container.style.height = String(desiredHeight)+"px";
container.style.marginTop = String(-0.5*desiredHeight)+"px";
}
}
window.addEventListener("resize", size_content);
window.addEventListener("orientationchange", size_content);
</script>
</head>
<body onload="size_content();" scroll="no" style="height:100%; margin:0; padding:0;">
<div id="container" style="position:fixed;">
<img id="image" style="width:100%;">
</div>
<script>
// Used to get the image path from the URL parameter.
function getUrlVars(name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return results[1];
}
document.getElementById('image').src = getUrlVars('img_url');
</script>
</body>
</html>
Be sure to fill out the image URL accordingly. In the simple implementation, this is inserted directly into the HTML. In the case of the more advanced loader, this is attached to the end of the URL (step 6, next section), allowing you to use the same loader for any number of GIF files. Use the following format:
http://LOADER_URL_HERE?img_url=IMAGE_URL_HERE
Save as an HTML file; this can be accomplished by saving with a file name ending in .html like so: my_file_name.html
Host this file somewhere online, and take note of the URL.
Add the Animated GIF to your Publication
1) Click "All Publications" on the left. Find your publication in the list.
2) To the right of the publication you'd like to add this image to, click the little icon in the 'Enrichments' column.
3) Wait for Zmags Enriched to load. Using the page-select menu on the right side, navigate to the desired page.
4) Click the cog icon on the left side, "HTML5 Iframe Widget", and then "Rectangular Tool".
5) Draw a rectangle. In the 'properties' box that pops up, enter the desired dimensions for height and width. The image will stretch to fit all space provided, so you will likely want to keep it in proportion to the original height and width of the GIF.
6) Right-click the "iframe URL" box and click 'paste' to enter the URL of your prepared HTML page (not the GIF itself).
7) At the top, click File > Save and Preview