Lightbox links are a great way to add some interactivity to your Zmags publications, but when trying to load an image directly into one, undesired behavior can occur:
This is because when loading an image directly, no formatting is attached to it beforehand. As such, the way the image is displayed is left to the whims of the browser being used by your reader, leading to inconsistent and incorrect behavior. The solution is to use an "image loader" to apply formatting to your images before placing them in the light box:
The loader is able to load any sized image into any sized lightbox, size the image as large as is allowed by the lightbox, and compensate for any discrepancy between the dimensions of the two. Here is the code used by the image loader:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content
{
position:absolute;
height:100%;
width:100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body scroll="no" style="margin:0; padding:0; background:black;">
<div id="content"></div>
<script type="text/javascript">
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('content').style.backgroundImage = "url(" + getUrlVars('img_url') + ")";
</script>
</body>
</html>
How to use the Image Loader:
Using the loader is quick and easy, and you don't need to understand the above code:
1) Copy the code above into a text editor such as Notepad++ or TextWrangler.
2) Save the file as HTML and upload it to your organization's website.
3) Instead of light boxing images directly, use the following link format:
http://LOADER_URL_HERE?img_url=IMAGE_URL_HERE
Be sure to fill in the URL where you uploaded the image loader and the URL where the desired image is located.