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 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 |
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);
Leave a Reply