Pure JavaScript Lightbox – Vanilla JS Image Lightbox

Category: Modal & Popup | May 23, 2019
Author: englishextra
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

Do you want to create a lightbox? Check out this simple and pure Javascript plugin which build in Vanilla Js. It’s only 10kB un-minified which is dead lightweight and mobile friendly. ‘

This plugin work with link or thumbnails which shows a popup box with a close button. It doesn’t require any external framework or library to work.

It’s a standalone plugin which also works well on mobile devices. The plugin comes some of the cool features, Let’s checkout list of its features.

Main Feature

  • Easy to initialize.
  • Responsive, fully mobile friendly.
  • Debounced launch, default 500ms, the customs rate can be set with rate property of options object.
  • The preloading spinner that is upset after the onload event succeeds.
  • Pure CSS Retina Ready UI images.
  • Custom event callback functions.

How to Use Pure JavaScript Lightbox

You simply need to Include the img-lightbox 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>

Next thing to create the markup for your images. You can simply wrap the images in the anchor link. Place the bigger image inside the link and define the thumbnail URL in the 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>

Last step to 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);