img-lightbox

img-lightbox Demo

Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

Demo

codepen

jsfiddle

jsbin

Features

• Simple initialization

• SPA / PWA friendly: prevents multiple same events assigning

• Debounced launch

• Custom event callbacks

CDN

jsDelivr

https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.1.0/img-lightbox.min.js

https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.1.0/img-lightbox.min.css

unpkg

https://unpkg.com/img-lightbox@0.1.0/img-lightbox.js

https://unpkg.com/img-lightbox@0.1.0/img-lightbox.css

Install

npm

npm install img-lightbox

bower

bower install img-lightbox

Setup

class is "img-lightbox-link" required.

data-src is required, and contains URL of your image.

<a href="https://farm1.staticflickr.com/955/27854475488_4f2b7f52e4_k.jpg"
class="img-lightbox-link"
data-src="https://farm1.staticflickr.com/955/27854475488_4f2b7f52e4_k.jpg"
aria-label="hidden"
rel="lightbox"><img src="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" alt="Image Lightbox" /></a>

Initialize

imgLightbox(document.body || "");

Tips

SPA / PWA developers don't need to bother: built-in class is added to a link.

That way you avoid multiple assignments to a single element.

Examples of event handling

var manageImgLightboxLinks = function (root, scope) {
 var ctx = scope && scope.nodeName ? scope : "";
 if (root.imgLightbox) {
   imgLightbox(ctx, {
     onCreated: function () {
       // show your preloader
     },
     onLoaded: function () {
       // hide your preloader
     },
     onError: function () {
       // hide your preloader
     },
   });
 }
};
manageImgLightboxLinks("undefined" !== typeof window ? window : this, document.body || "");

GitHub

englishextra/img-lightbox

License

available under MIT License