Minimal Responsive Image Lightbox In Pure JavaScript

Category: Javascript , Modal & Popup | January 17, 2019
Author: englishextra
Views Total: 926
Official Page: Go to website
Last Update: January 17, 2019
License: MIT

Preview:

Minimal Responsive Image Lightbox In Pure JavaScript

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:

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

You Might Be Interested In:


Leave a Reply