Bootstrap Filter Gallery with Lightbox using JavaScript

Bootstrap Filter Gallery with Lightbox using jQuery
Code Snippet:lightbox-gallery
Author: Yi Lin Tsai
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 11,080
License: MIT
Edit Code online: View on CodePen
Read More

Yet another responsive image gallery built with pure JavaScript and Bootstrap CSS that lets you make a filter gallery with lightbox. Basically, this plugin generates filterable tags for gallery images and displays items in the lightbox popup. You can slide lightbox images with the next and previous buttons.
You can fully customize this gallery plugin with CSS according to your needs.

How to Build Bootstrap Filter Gallery with Lightbox

1. Load the Bootstrap and Filter Gallery CSS file into your HTML document.

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Filter Gallery CSS -->
<link rel="stylesheet" href="css/glightbox.css">

2. After that, create the markup for filter buttons and image gallery as follows.

  <div class="container">
    <div class="row">
      <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h1 class="gallery-title">Gallery</h1>
        <div class="text-center">
          <button class="btn btn-default filter-button active" id="all" onclick="call(this.id)">All</button>
          <button class="btn btn-default filter-button" id="dog" onclick="call(this.id)">Dog</button>
          <button class="btn btn-default filter-button" id="cat" onclick="call(this.id)">Cat</button>
          <button class="btn btn-default filter-button" id="fish" onclick="call(this.id)">Fish</button>
          <button class="btn btn-default filter-button" id="panda" onclick="call(this.id)">Panda</button>
        </div>
      </div>

      <a href="https://upload.wikimedia.org/wikipedia/commons/0/0e/Atlanta_Zoo_Panda.jpg"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter panda">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Atlanta_Zoo_Panda.jpg">
      </a>
      <a href="https://s3.amazonaws.com/assets.prod.vetstreet.com/65/eb3fc0a34211e087a80050568d634f/file/Singapura-4-645mk062311.jpg"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter cat">
        <img src="https://s3.amazonaws.com/assets.prod.vetstreet.com/65/eb3fc0a34211e087a80050568d634f/file/Singapura-4-645mk062311.jpg">
      </a>
      <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAtECi6fhmyr3QmqHqIZ8hLynoueGEKMvlMngP1PkvkTDJ8AoM"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter panda">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAtECi6fhmyr3QmqHqIZ8hLynoueGEKMvlMngP1PkvkTDJ8AoM">
      </a>
      <a href="https://upload.wikimedia.org/wikipedia/commons/4/42/%C2%A1Panda_en_peligro_de_extinci%C3%B3n%21.jpg"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter panda">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/42/%C2%A1Panda_en_peligro_de_extinci%C3%B3n%21.jpg">
      </a>
      <a href="http://pngimg.com/uploads/fish/fish_PNG25129.png"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter fish">
        <img src="http://pngimg.com/uploads/fish/fish_PNG25129.png">
      </a>
      <a href="https://cdn.pixabay.com/photo/2016/11/01/23/38/beach-1790049_960_720.jpg"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter dog">
        <img src="https://cdn.pixabay.com/photo/2016/11/01/23/38/beach-1790049_960_720.jpg">
      </a>
      <a href="http://www.malaysiacatclub.com/breeds/somali1.jpg"
        class="glightbox gallery_product col-6 col-lg-4 col-md-4 col-sm-4 col-xs-6 filter cat">
        <img src="http://www.malaysiacatclub.com/breeds/somali1.jpg">
      </a>
    </div>
  </div>

3. Now, include the Filter Gallery and its initialization JavaScript file into your HTML document to active the gallery.

<!-- Filter Gallery JS -->
<script src="./js/glightbox.min.js"></script>

<!-- Initialize -->
<script src="./js/index.js"></script>

4. Some basic CSS styles to control the looks of filter buttons & gallery.

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.filter-button.active
{
    background-color: #42B32F;
    color: white;
}
.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
	-webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.block{
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

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

2 thoughts on “Bootstrap Filter Gallery with Lightbox using JavaScript”

  1. Hi all.
    I put it on a page made with Bootstrap 4. The huge problem is when on mobile view, the light box slider does not work. When you click on an image, it opens, but no slider indicators available. No touch swipe available, only X button for closing the light box.
    Any tips?
    Thx

    Reply

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