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

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
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*