Bootstrap Filter Gallery with Lightbox using JavaScript

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="https://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="https://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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.