Press "Enter" to skip to content

Responsive Image Gallery & Lightbox Plugin using Bootstrap

Bootstrap Gallery With this script and Bootstrap 4, you can easily create an image gallery. You just have to put the thumbnails on the page. The Bootstrap Gallery plugin displays a set of images in the Bootstrap popup, which the user can browse by clicking the next/previous button.

responsive lightbox image gallery jquery, bootstrap image gallery lightbox, bootstrap responsive lightbox, bootstrap lightbox multiple images, bootstrap lightbox gallery demo

How to make use of it:

1. Load the required sources within the HTML doc.

<!-- 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 information.

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

3. Add the CSS class thumbnail to picture links and complete.

<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 picture collections utilizing the data-gallery attribute in instances the place you might have a number of galleries on the web 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 additionally helps 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');
});

Photo Gallery & Lightbox Plugin, Bootstrap gallery Plugin/Github, bootstrap lightbox gallery, bootstrap image gallery free download, responsive lightbox jquery


See Demo And Download

Official Website(ludovicscribe): Click Here

This superior jQuery/javascript plugin is developed by ludovicscribe. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *