Responsive Image Lightbox Gallery With Blurred Background - jquery.lightbox.js

The Responsive-Lightbox jQuery plugin displays a group of images in a responsive gallery lightbox with a blurred overlay covering the main content.

Features:

• Cross-browser and fully responsive.
• Blur other content using CSS filter.
• Show/hide navigation controls.

How to use it:

1. To get started, include jQuery library and the responsive-lightbox plugin's files on the html page.

<link rel="stylesheet" href="jquery.lightbox.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.lightbox.js"></script>

2. Insert thumbnails into the webpage and define the path to the large images in the a href attribute as follows:

<ul class="gallery">
  <li>
    <a href="large-1.jpg">
      <img src="thumb-1.jpg">
    </a>
  </li>
  <li>
    <a href="large-2.jpg">
      <img src="thumb-2.jpg">
    </a>
  </li>
  <li>
    <a href="large-3.jpg">
      <img src="thumb-3.jpg">
    </a>
  </li>
  ...
</ul>

3. To enable the caption bar, define the image descriptions in the data-caption attribute as follows:

<ul class="gallery">
  <li>
    <a href="large-1.jpg" data-caption="Image 1">
      <img src="thumb-1.jpg">
    </a>
  </li>
  <li>
    <a href="large-2.jpg" data-caption="Image 2">
      <img src="thumb-2.jpg">
    </a>
  </li>
  <li>
    <a href="large-3.jpg" data-caption="Image 3">
      <img src="thumb-3.jpg">
    </a>
  </li>
  ...
</ul>

4. Call the function lightbox on the image links and done.

$(function() {
  $('.gallery a').lightbox(); 
});

5. Specify the minimum margin around the image. Default: 50.

$('.gallery a').lightbox({
  margin: 100
}); 

6. Enable/disable the navigation controls. Default: true.

$('.gallery a').lightbox({
  nav: false
}); 

7. Enable/disable the blur effect. Default: true.

$('.gallery a').lightbox({
  blur: false
}); 

8. Specify the minimum window width or height to enable the lightbox plugin. Below the threshold will open the image in a new tab. Useful for disabling the plugin on mobile devices.

$('.gallery a').lightbox({
  minSize: 480
}); 

Changelog:

2020-12-01

• v1.4.1: Captions load instantly

---

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