Bootstrap Image Gallery with Lightbox

Bootstrap Grid Image Gallery with Lightbox
Code Snippet:bsPhotoGallery
Author: Michael Soriano
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 7,051
License: MIT
Edit Code online: View on CodePen
Read More

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

How to Create Bootstrap Image Gallery with Lightbox

1. To get started with the Bootstrap image gallery, load the jQuery, Bootstrap framework, and Popper Js into an 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 a 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 the jQuery document ready function.

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

Advance Configuration Options

The following are some advanced configuration options to create/customize the 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 a larger image in a modal when clicked. By default, true is used.

$("ul.first").bsPhotoGallery({
   hasModal: true
});
showControl show next/previous buttons in the modal. By default, true is used.

$("ul.first").bsPhotoGallery({
  showControl: true
});
shortText Truncate text to a single line in the grid. By default, true is used.

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

That’s all! hopefully, you have successfully created an image gallery with lightbox. If you have any questions or facing any issues, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X