Responsive Photo Gallery & Lightbox Plugin For jQuery - ZOOM

ZOOM is a jQuery photo gallery plugin which allows you to display zoomed images in a responsive fullscreen lightbox slider. You can navigate between the images with next/prev arrows and keyboard. Press the ESC key, click on the blank area to close the gallery lightbox. Image loading indicator is supported as well.

How to use it:

1. Include jQuery JavaScript library and the jQuery ZOOM plugin's file on the html page.

<link rel="stylesheet" href="css/zoom.css">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/zoom.min.js"></script>

2. The required markup structure to create a photo gallery. This will auto trigger the plugin.

<div class="container">
  <div class="gallery">
    <div>
      <a href="1.jpg"><img src="thumb-1.jpg"></a>
    </div>
    <div>
      <a href="2.jpg"><img src="thumb-2.jpg"></a>
    </div>
    <div>
      <a href="3.jpg"><img src="thumb-3.jpg"></a>
    </div>
  </div>
</div>

3. Add a blur effect to the lightbox overlay.

.zoomed > .container {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

---

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