Photo Gallery & Lightbox Plugin For Bootstrap

A Bootstrap Gallery plugin that displays a collection of images in a Bootstrap modal popup, which the user can browse through by clicking the next/previous button.

Based on jQuery, Font Awesome v5, and Bootstrap's Modal & Carousel components.

How to use it:

1. Load the required resources in the HTML document.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

2. Load the Bootstrap Gallery plugin's files.

<link rel="stylesheet" href="./minified/bootstrap-gallery.min.css" />
<script src="./minified/bootstrap-gallery.min.js"></script>

3. Add the CSS class thumbnail to image links and done.

<a href="1.jpg" class="thumbnail">
  <img src="1.jpg" alt="Alt 1" />
</a>

<a href="2.jpg" class="thumbnail">
  <img src="2.jpg" alt="Alt 2" />
</a>

<a href="3.jpg" class="thumbnail">
  <img src="3.jpg" alt="Alt 3" />
</a>

...

4. Group your image collections using the data-gallery attribute in cases where you have multiple galleries on the page.

<a href="1.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="1.jpg" alt="Alt 1" />
</a>

<a href="2.jpg" class="thumbnail" data-gallery="gallery1">
  <img src="2.jpg" alt="Alt 2" />
</a>

<a href="3.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="3.jpg" alt="Alt 3" />
</a>

<a href="4.jpg" class="thumbnail" data-gallery="gallery2">
  <img src="4.jpg" alt="Alt 4" />
</a>

5. It also supports plain text links.

<a href="1.jpg" class="show-gallery">
  Text Link 1
</a>

<a href="2.jpg" class="show-gallery">
  Text Link 2
</a>

<a href="3.jpg" class="show-gallery">
  Text Link 3
</a>

...

6. An custom selectors:

<a href="1.jpg" class="custom-selector">
  Text Link 1
</a>

$(function(){
  bootstrapGallery('a.custom-selector');
});

---

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