Bootstrap Image Gallery with Lightbox – jQuery bsPhotoGallery

Bootstrap image gallery with lightbox. A lightweight jQuery plugin that creates responsive grid layout image gallery from list of images with Bootstrap 4.x. The plugin also provide lightbox that support image sliding with next and previous button.

Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	bsPhotoGallery
Author:	Michael Soriano
Licence:	GPL 3.0
Published:	2019-03-29 06:20:31
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 and Popper Js 1.12.3 or Later
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	47 KB

Demo Download

How to Use Bootstrap Image Gallery:

1. To getting started with Bootstrap image gallery, load the jQuery, Bootstrap framework and Popper Js into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Popper Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

2. Create list of images for Bootstrap Gallery like below.

<ulvclass="row first">
    <li>
      <img alt="Your image alt text"  src="your-first-image-path">
         <p>Some text after the photo</p>
    </li>
    <li>
      <img alt="Your image alt text"  src="your-second-image-path">
         <p>Some text after the photo</p>
    </li>

    ---------------------------------------------------------
    ---------------------------------------------------------
    <li>
      <img alt="Your image alt text"  src="your-n-image-path">
         <p>Some text after the photo</p>
    </li>

</ul>

3. Initialize the plugin in jQuery document ready function.

$(document).ready(function(){
     $("ul.first").bsPhotoGallery();
});

Advance Configuration Options for Bootstrap Image Gallery

The following are some advance configuration options to create / customize bootstrap image gallery with lightbox.

$("ul.first").bsPhotoGallery({
   classes:  "col-xl-2 col-lg-2 col-md-2 col-sm-4",
});

$("ul.first").bsPhotoGallery({
   hasModal: true
});

$("ul.first").bsPhotoGallery({
  showControl: true
});

$("ul.first").bsPhotoGallery({
  shortText: true
});