Enlarge Images In A Slideshow Popup - Modal Lightbox

Just another responsive lightbox image gallery plugin that enlarges and showcase your images in a slideshow modal with autoplay support.

More Features:

• Cross-fading transition effects.
• Pagination bullets and navigation arrows.
• Allows to close the modal by clicking the outside of the image slideshow.
• Displays descriptions on the images.
• Touch-enabled. Allows the user to switch between images with tap and swipe events.
• Dead simple to use. Without any JS call.

How to use it:

1. Insert the minified version of the Modal Lightbox plugin into the document.

<link rel="stylesheet" href="/path/to/dist/modal.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/bod-modal.js"></script>

2. Load the Font Awesome Iconic Font if you need to display an expand icon on the thumbnails. OPTIONAL.

<link rel="stylesheet" href="/path/to/fontawesome/css/all.css" />

3. Wrap your images into a container element with the CSS class of 'bod-modal' and define the image descriptions in the title attribute. That's it.

<div class="bod-modal">
  <div>
    <a href="1.jpg" title="Description 1">
      <img src="1.jpg" alt="Alt 1" />
    </a>
  </div>
  <div>
    <a href="2.jpg" title="Description 2">
      <img src="2.jpg" alt="Alt 2" />
    </a>
  </div>
  <div>
    <a href="3.jpg" title="Description 3">
      <img src="3.jpg" alt="Alt 3" />
    </a>
  </div>
  ...
</div>

4. Determine the position of the image descriptions. Possible values:

• left
• right
• center

<div class="bod-modal" data-title="center">
  ...
</div>

5. Determine the auto play interval (in seconds) between slides. 0 = no autoplay, undefined value defaults to 5 seconds.

<div class="bod-modal" data-title="center" data-interval="3">
  ...
</div>

6. Display an expand icon on each image.

<div class="bod-modal">
  <div class="bod-expand-icon">
    <a href="1.jpg" title="Description 1">
      <img src="1.jpg" alt="Alt 1" />
    </a>
  </div>
  <div class="bod-expand-icon">
    <a href="2.jpg" title="Description 2">
      <img src="2.jpg" alt="Alt 2" />
    </a>
  </div>
  <div class="bod-expand-icon">
    <a href="3.jpg" title="Description 3">
      <img src="3.jpg" alt="Alt 3" />
    </a>
  </div>
  ...
</div>

Changelog:

2020-11-25

• stop both touchstart and click events firing

2020-03-24

• Mobile swipe to navigate

---

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