Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo
https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.1.8/js/img-lightbox.min.js
https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.1.8/css/img-lightbox.min.css
https://unpkg.com/img-lightbox@0.1.8/js/img-lightbox.js
https://unpkg.com/img-lightbox@0.1.8/css/img-lightbox.css
npm install img-lightbox
bower install img-lightbox
class
is required, and can be any name you choose.
data-src
is another method to get the source URL when you do not want the link to lead to some real URL.
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>
For those who don't use 3rd-party scripts that interfere with links behaviour and don't force window.location
they have no need in either data-touch="true"
or {touch: true}
.
When you have scripts that interfere, then to keep lightbox working, use {touch: true}
or data-touch="true"
.
data-src
or href
doesn't matter, but you shouldn't enable touch
override if you have a full screen image in a lighbox link and have no other space to scroll down.
imgLightbox("img-lightbox-link");
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.
(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);
Available under MIT License