Minimal Responsive Image Lightbox In Pure JavaScript

Preview:

Description:

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

Compatible with single page app (SPA) and Progressive Web App (PWA).

Installation:

# NPM
$ npm install img-lightbox --save

How to use it:

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 image within the document. The ‘src’ attribute is used to specify the path to the large version of the image.

<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 image lightbox.

imgLightbox(document.body || "");

Event handlers available.

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 || "");

Changelog:

04/10/2021

• v0.2.5

11/22/2020

• Refactor

v0.2.3 (01/17/2018)

• Fixed init for SPA
• Fixed multiple container creation

v0.2.1 (12/23/2018)

• Fixed body scroll disabling on lightbox open

v0.1.9 (12/21/2018)

• Fixed CSS minification

v0.1.8 (12/20/2018)

• Added touch events support

v0.1.5 (12/19/2018)

• Fixed on ESC key event bug

v0.1.4 (12/18/2018)

• Reorginized the file tree of the library

v0.1.3 (12/18/2018)

• Changed z-index 999999 to play well with wp-admin
• Changed data-src (which is still supported for compatibility) to href as the source for image
• Pure CSS Retina Ready UI images, no external ones
• Freeze body scrolling on lightbox open
• Added Close button
• Closes on ESC

v0.1.2 (07/16/2018)

• Added onClosed callback option

07/08/2018

• JS update