Minimal Responsive Image Lightbox With jQuery

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'>&times;</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.