Minimal Responsive Image Lightbox In Pure JavaScript

Category: Javascript , Modal & Popup | July 16, 2018
Author: englishextra
Views Total: 616
Official Page: Go to website
Last Update: July 16, 2018
License: MIT


Minimal Responsive Image Lightbox In Pure JavaScript


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).

How to use it:

Add references to the img-lightbox’s JavaScript and CSS.

<link rel="stylesheet" href="./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 ‘data-src’ attribute is used to specify the path to the large version of the image.

<a href="large.jpg" 
   <img src="thumb.jpg" alt="Image Lightbox">

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 || "");


v0.1.2 (07/16/2018)

  • Added onClosed callback option


  • JS update

You Might Be Interested In:

Leave a Reply