THEMETRIAL

Minimal Responsive Image Lightbox In Pure JavaScript

Author:englishextra
Views Total:9 views
Official Page:Go to website
Last Update:April 10, 2021
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="https://www.cssscript.com/./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="https://www.cssscript.com/large.jpg" 
   class="img-lightbox-link" 
   src="https://www.cssscript.com/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

11/22/2020

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)

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


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.