Bootstrap Image Gallery with Lightbox – jQuery bsPhotoGallery

March 29, 2019 admin Gallery, LightBox 0

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: 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.

classes

Bootstrap Grid classes. By default, “col-xl-2 col-lg-2 col-md-2 col-sm-4” shall be used. 

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

Show larger image in a modal when clicked. By default, true is used. 

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

show next / previous buttons in modal. By default, true is used. 

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

Truncate text to a single line in grid. By default, true is used. 

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

Related jQuery Plugins: