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" 
     src="https://picsum.photos/600/450/?random"
     title="Click To Enlarge">

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

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></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 + ")");
    $('.enlargeImg_wrapper').fadeIn(200);
  })
}
// close lightbox
function closeImg() {
  $('.enlargeImg_wrapper').fadeOut(200).remove();
}

4. Enable the lightbox on the images.

$(function() {
  enlargeImg();
})

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.