Minimal Responsive Image Lightbox With jQuery
File Size: | 6.8 KB |
---|---|
Views Total: | 2540 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a small jQuery script that makes it easier to enlarge and display your images in a responsive modal/lightbox popup when clicked. Smooth modal open/close animations based on CSS3 transforms and keyframes.
How to use it:
1. Import the stylesheet lightbox.css
in the document that provides the necessary CSS styles and CSS animations for the image modal/lightbox.
<link href="lightbox.css" rel="stylesheet">
2. Add the CSS classes to the desired images as follows:
<img class="lightbox" src="1.jpg" /> <img class="lightbox" src="2.jpg" /> <img class="lightbox" src="3.jpg" /> <img class="lightbox" src="4.jpg" /> <img class="lightbox" src="5.jpg" /> ...
3. Import the necessary jQuery JavaScript library at the end of the document.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"> </script>
4. Place the JavaScript file lightbox.js
after jQuery library or just copy and add the following jQuery snippets to your existing JavaScript file.
$(document).ready(function () { "use strict"; $(".lightbox").click(function () { var imgsrc = $(this).attr('src'); $("body").append("<div class='img-popup'><span class='close-lightbox'>×</span><img src='" + imgsrc + "'></div>"); $(".close-lightbox, .img-popup").click(function () { $(".img-popup").fadeOut(500, function () { $(this).remove(); }).addClass("lightboxfadeout"); }); }); $(".lightbox").click(function () { $(".img-popup").fadeIn(500); }); });
This awesome jQuery plugin is developed by mohamedfesal. For more Advanced Usages, please check the demo page or visit the official website.