Pure JavaScript Lightbox – Vanilla JS Image Lightbox

A simple, lightweight (10kb unminified) and mobile friendly pure JavaScript lightbox to show images in popup box with close button.This vanilla JavaScript lighbox plugin doesn’t require any external framework or library to work.

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	img-lightbox
Author:	English Extra
Licence:	MIT Licence
Published:	May 19, 2019
Repository:	Fork on GitHub
Dependencies:	No dependency!
File Type:	zip archive (Images, HTML, CSS & JavaScript )
Package Size:	345 KB

Demo Download

Main Feature

• Easy to initialize.
• Responsive, fully mobile friendly.
• 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.
• Custom event callback functions.

How to Use Pure JavaScript Lightbox

1. Include the img-lightbox‘s CSS and JavaScript files into your HTML document to create image lightbox.

<!-- Lightbox CSS -->
<link rel="stylesheet" href="css/img-lightbox.css">

<!-- Lightbox JavaScript -->
<script src="js/img-lightbox.js"></script>

2. Create markup for your images as follows. Wrap your image in anchor link of the full-width image and insert thumbnail url in img src.

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

3.Finally, initialize the img-lightbox plugin in HTML <script> tag with all available options.

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