Responsive No-jQuery Pure JS/CSS Lightbox for Photos

img-lightbox is a lightweight and handy JavaScript lightbox library to display the large version of your image in a responsive modal popup with fadeIn and fadeOut animations supported by CSS3.

How to make use of it:

Installation:

# NPM
$ npm install img-lightbox --save

Add references to the IMG-lightbox’s JavaScript and CSS.

<link rel="stylesheet" href="./img-lightbox.css">
<script src="./img-lightbox.js"></script>

Add a link with the CSS class of ‘img-lightbox-link’ to the picture inside the doc.

<a href="large.jpg" 
   class="img-lightbox-link" 
   src="large.jpg" 
   aria-label="hidden" 
   rel="lightbox">
   <img src="thumb.jpg" alt="Image Lightbox">
</a>

Initialize the picture lightbox.

imgLightbox(document.body || "");

Event handlers are accessible.

var manageImgLightboxLinks = function (root, scope) {
    var ctx = scope && scope.nodeName ? scope : "";
    if (root.imgLightbox) {
     imgLightbox(ctx, {
       onCreated: function () {
         // on created
       },
       onLoaded: function () {
         // on loaded
       },
       onError: function () {
         // on error
       },
       onClosed: function () {
         // on closed
       }
     });
    }
};
manageImgLightboxLinks("undefined" !== typeof window ? window : this, document.body || "");

Minimal Responsive Image Lightbox, IMG Lightbox Demo Plugin/Github