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

codepen jsfiddle jsbin

• 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

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

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

npm install img-lightbox

class is required, and can be any class name you choose (in this demo it's img-lightbox-link). 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. 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" (you shouldn't enable this touch override if you have a full screen image in a lighbox link and have no other space to scroll down). data-src or href doesn't matter.

<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-hidden="true"
rel="lightbox"><img src="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" alt="Image Lightbox" /></a>

imgLightbox("img-lightbox-link");

SPA / PWA developers don't need to bother: work-related 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 */,
      touch: false /* default: false - use with care for responsive images in links on vertical mobile screens */
    });
  }
})("undefined" !== typeof window ? window : this);

englishextra/img-lightbox

Available under MIT license.