Close Button Examples
"Keep Shopping" Button: Basic Example
"Keep Shopping" Button: Advanced Example
Close Button Examples
Our lightbox solution have contains a built-in close button by default. For stylistic purposes however, you may wish to use a close button within the popup instead of or addition to that. To do so, use the following code in the HTML of your popup's content.
Note: this code is only for use with the built-in lightbox solution linked above, and will not function with the other light box solutions we offer. Additionally, this functionality is only available to Commerce accounts at this time. (For more information regarding Zmags Commerce, please contact your Account Manager.)
This line should be added to the <head> of the HTML:
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
This code should be called from your close button:
com.zmags.api.Lightbox.close();
So, for example, you could have a text button:
<button type="button" onClick="com.zmags.api.Lightbox.close();">Close</button>
Or you could use a formatted div:
<div onClick="com.zmags.api.Lightbox.close();" style="position:fixed; top:82px; left:110px; border:2px solid black; padding:0px 7px 1px 6px; background:#4D4D4D; color:white; font-family:Arial Unicode MS; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;">X</div>
Or you could use an image link for the button instead:
<a onClick="com.zmags.api.Lightbox.close();"><img src="http://www.mywebsite.com/close.png" style="border:0;"></a>
Note that for this you will need the "close.png" image available at some specified address.
One particularly useful implementation of this functionality is the "Keep Shopping" button. It serves the purpose of easily returning to the catalog after an item has been added to the reader's cart. The code, shown below, simply changes the "Add to Cart" button after it is clicked into a "Keep Shopping" button which closes the light box:
<!DOCTYPE html>
<html>
<head>
<title>Lightbox API Test</title>
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
function add_to_cart(){
// Handle any code involved with adding the item to the cart here.
var button = document.getElementById('addToCart');
button.innerHTML = button.innerHTML.replace("Add to Cart","Keep Shopping");
button.onclick = function(){ com.zmags.api.Lightbox.close(); };
}
</script>
</head>
<body>
Include any light box content as usual!<br><br>
"Keep Shopping" button:
<div id="addToCart" onclick="add_to_cart();" style="position:absolute; width:100px; border:solid black 1px; -moz-border-radius:15px; border-radius:15px; background:#38E875; text-align:center; margin:5px; padding:5px;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
Add to Cart
</div>
</body>
</html>
In this example we swap out text inside a div, but you could just as easily use a similar approach to swap out an "Add to Cart" button image for a "Keep Shopping" button image:
button.src = "./images/keep_shopping.png";
"Keep Shopping" Button: Advanced Example
A logical continuation of the basic example above includes code handling a "View Cart" button as well. Here's the code used in the demo publication's DPW:
<!DOCTYPE html>
<html>
<head>
<title>Lightbox API Test</title>
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
function add_to_cart(){
// Handle any code involved with adding the item to the cart here.
var button = document.getElementById('addToCart');
button.innerHTML = button.innerHTML.replace("Add to Cart","Keep Shopping");
button.onclick = function(){ com.zmags.api.Lightbox.close(); };
document.getElementById('viewCart').style.cssText += "left:370px;";
}
</script>
</head>
<body style="margin-top:-15px;">
<h1>Delicious Cereal</h1>
<img src="cereal.jpg" align="left" style="padding:0px 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed elit ligula. Maecenas consectetur elementum commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ut faucibus lorem. Sed lectus ipsum, adipiscing ut sodales eget, posuere sollicitudin sem. Ut est urna, feugiat eget lobortis ac, ullamcorper sit amet felis. Praesent congue augue a diam varius euismod.
Integer malesuada, velit sed placerat varius, sem dui rhoncus arcu, et ornare mi arcu sit amet velit. In hac habitasse platea dictumst. Suspendisse pharetra tortor vel magna suscipit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet lobortis augue, ut pharetra eros consectetur et. Sed quis tellus purus. Quisque rutrum mollis risus non feugiat. Ut massa nisi, tempus pulvinar pellentesque vitae, posuere accumsan mi.
<div id="addToCart" onclick="add_to_cart();" style="position:absolute; left:250px; width:100px; border:solid black 1px; -moz-border-radius:15px; border-radius:15px; background:#38E875; text-align:center; margin:5px; padding:5px;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
Add to Cart
</div>
<div id="viewCart" style="position:absolute; left:250px; width:100px; border:solid black 1px; -moz-border-radius:15px; border-radius:15px; background:#38E875; text-align:center; margin:5px; padding:5px; z-index:-1;">
<a href="./cart.html">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
</a>
View Cart
</div>
</body>
</html>
And here's the code used for the mock-up shopping cart:
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Mockup</title>
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
</head>
<body>
Your cart currently contains 1 item:<br><br>
<div style="border:solid black 1px; width:90%; padding:10px;"><img src="./cereal.jpg" style="width:108px; height:89px;">
Delicious Cereal! $xx.xx</div>
Total: $xx.xx<br><br>
<div id="keepShopping" onclick="com.zmags.api.Lightbox.close();" style="position:absolute; width:100px; border:solid black 1px; -moz-border-radius:15px; border-radius:15px; background:#38E875; text-align:center; margin:5px; padding:5px;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
Keep Shopping
</div>
<div id="checkout" onclick="alert('Not included in this demo!');" style="position:absolute; left:130px; width:100px; border:solid black 1px; -moz-border-radius:15px; border-radius:15px; background:#38E875; text-align:center; margin:5px; padding:5px;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
Checkout
</div>
</body>
</html>