Bootstrap Image Gallery with Lightbox – jQuery bsPhotoGallery

Plugin Preview

Share this:

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:	March 29, 2019
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
});