Pure JavaScript Image Lightbox – zbox.js

zbox.js is a simple lightweight JavaScript library used to display images on top of your webpage like the familiar lightbox.

How to use it:

Add the zbox.js into the web page.

<script src="zbox.js"></script>

Add an images on your webpage.

<img src="1.jpg">

Or create a link pointing to your image.

<a href="1.jpg"/>Image Link</a>

Enable the image lightbox.

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

Changelog:

07/12/2018

• fade animation now is using requestAnimationFrame