Minimal Responsive Image Lightbox With jQuery

File Size: 6.8 KB
Views Total: 2577
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 

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

  $(".lightbox").click(function () {


This awesome jQuery plugin is developed by mohamedfesal. For more Advanced Usages, please check the demo page or visit the official website.