Pure JavaScript Image Lightbox – Zbox.js

The Zbox.js is a simple and lightweight solution for pure Javascript image lightbox. It can be used on image or link to show a bigger version of the image.

It is a flexible image viewer of the javascript library which is responsive and mobile friendly. When a user clicks on the image thumbnail, it shows a bigger image with fade animation.

How to Use Image Lightbox with Javascript

Simply add the zbox.js before head closing.

<script type="text/javascript" src="zbox.js"></script>

Add an image or your own link on your webpage.

<div class="imgDiv">
    Image 1:<br><br><img height="100" src="img/img1.jpg"/>
</div>
<div class="imgDiv">
    Image 2:<br><br><a href="img/img2.jpg"/>Image Link</a>
</div>

Call the main lightbox function and do change the options as you want.

<script>
var a;
document.addEventListener("DOMContentLoaded", function(event) {
	a = new Zbox({
		overlayClick 	: true, /* overlay click close the modal. */
		fadeTime 		: 1000, /* Time in ms for fade effect. */
		loading  		: "Loading image message",
		querySelector 	: "img, a", /* Elements to apply zbox. */
	});
});
</script>