Minimal Responsive Image Lightbox In Pure JavaScript

Category: Javascript , Modal & Popup | July 16, 2018
Author: englishextra
Views Total: 616
Official Page: Go to website
Last Update: July 16, 2018
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).

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

<a href="large.jpg" 
   class="img-lightbox-link" 
   data-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.1.2 (07/16/2018)

  • Added onClosed callback option

07/08/2018

  • JS update

You Might Be Interested In:

Leave a Reply