Responsive Image Lightbox in Javascript

Category: Modal & Popup | July 17, 2018
Author: englishextra
Official Page: Go to Website
Last Update:August 1, 2023

The img-lightbox is a lightweight javascript plugin which helps you to build a fully responsive image lightbox in no time and without using Jquery. It i

It is simple and easy to use a plugin which displays a larger version of an image when clicking on image or link. It provides powered full animations fade in and Fadeout. It displays the bigger image in a modal popup by using CSS3 animation.

Add Photo Lightbox & Make it Responsive

Simply call the two files in the head tag to implement on your web page.

<link rel="stylesheet" type="text/css" href="img-lightbox.css" />
<script type="text/javascript" src="img-lightbox.js"></script>

Next, add the HTML code but make sure to add the class name img-lightbox-link to the link. Add the larger version of an image in the href and also make sure to add it in a data-src attribute.

Specify the path to the thumbnail in the image source tag.

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

Initialize the image lightbox by using Javascript function and event handlers available to customize according to your need.

<script type="text/javascript">
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 || "");

Features Of Responsive Lightbox

  • Simple initialization
  • SPA / PWA friendly: prevents multiple same events assigning
  • Debounced launch
  • Custom event callbacks


v0.1.2 (07/16/2018)

  • Added onClosed callback option


  • JS update