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, default 500ms, custom rate can be set with rate property of options object
• Preloading spinner that is unset after onload event succeeds
• Pure CSS Retina Ready UI images, no external ones (prompted by github.com/jasomdotnet, thanks)
• Custom event callbacks

CDN

jsDelivr

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

unpkg

https://unpkg.com/img-lightbox@latest/img-lightbox.js
https://unpkg.com/img-lightbox@latest/img-lightbox.css

Install

npm

npm install img-lightbox

bower

bower install img-lightbox

Setup

class is not required. They are used here to select elements. You may use some other method for elements selection.

data-src is deprecated, but supported for compatibility.

href is required, and contains URL of your image.

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

Initialize

imgLightbox("img-lightbox-link");

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

(function(root){
	"use strict";
	if (root.imgLightbox) {
		imgLightbox("img-lightbox-link", {
			onCreated: function () {
				/* show your preloader */
			},
			onLoaded: function () {
				/* hide your preloader */
			},
			onError: function () {
				/* hide your preloader */
			},
			onClosed: function () {
				/* hide your preloader */
			},
			rate: 500 /* default: 500 */
		});
	}
})("undefined" !== typeof window ? window : this);

GitHub

englishextra/img-lightbox

License

Available under MIT License