Bootstrap Filter Gallery with Lightbox using JavaScript

Yet another responsive image gallery built with pure JavaScript and Bootstrap CSS that lets you to make filter gallery with lightbox. Basically, this plugin generates filterable tags for gallery image and display items in lightbox popup. You can slide lightbox images with next and previous button.

You can fully customize this gallery plugin with CSS according to your needs.




Plugin Overview

Plugin: lightbox-gallery
Author: Yi Lin Tsai
Licence: MIT Licence
Published: June 23, 2019
Repository: Fork on GitHub
Dependencies: Bootstrap 4.1.3 (CSS File)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 44 KB

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