Basic Image Lightbox Plugin With jQuery - EnlargeImg

File Size: 2.59 KB
Views Total: 990
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Image Lightbox Plugin With jQuery - EnlargeImg

The EnlargeImg makes use of jQuery and CSS to create a basic, fullscreen, responsive lightbox to overlay your image just like a modal.

How to use it:

1. Add the CSS class 'enlargeImg' to your images.

<img class="enlargeImg" 
     title="Click To Enlarge">

2. Include the latest version of jQuery JavaScript lbrary on the page.

<script src=""></script>

3. The main functions to zoom in/out images on click.

// image zoom
function enlargeImg() {
  $(".enlargeImg").click(function() {
    $(this).after("<div onclick='closeImg()' class='enlargeImg_wrapper'></div>");
    var imgSrc = $(this).attr('src');
    $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
// close lightbox
function closeImg() {

4. Enable the lightbox on the images.

$(function() {

5. Style the background overlay when the lightbox is activated.

.enlargeImg_wrapper {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: rgba(52, 52, 52, 0.8);
  background-size: 50%;

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