Responsive Image Lightbox in Javascript

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" 
   class="img-lightbox-link" 
   data-src="large.jpg" 
   aria-label="hidden" 
   rel="lightbox">
   <img src="thumb.jpg" alt="Image Lightbox">
</a>

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

Features Of Responsive Lightbox

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

Changelog:

v0.1.2 (07/16/2018)

• Added onClosed callback option

07/08/2018

• JS update