Pure JavaScript Image Lightbox – zbox.js

Category: Javascript , Modal & Popup | July 12, 2018
Author: lenonmauer
Views Total: 1,615
Official Page: Go to website
Last Update: July 12, 2018
License: MIT

Preview:

Pure JavaScript Image Lightbox – zbox.js

Description:

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

Leave a Reply