Filterable Image Gallery – CodingNepal

Responsive Filterable Image Gallery in HTML Bootstrap & JavaScript

CodingNepal — Fri, 05 May 2023 10:09:50 +0000

A filterable image gallery is a type of image gallery that allows users to filter or sort the displayed images based on certain categories or tags. This is one of the essential elements on today’s website, as it allows users to easily find the images they are interested in without having to scroll through a long list of images.

Creating a filterable image gallery using HTML, Bootstrap, and JavaScript can greatly enhance your web development skills. With Bootstrap, a popular front-end framework, you can easily create responsive website elements that adapt to different screen sizes and devices.

The purpose of this blog post is to provide you with a comprehensive guide on how to create a filterable image gallery using these three essential technologies: HTML, Bootstrap, and JavaScript. The step-by-step instructions and clear explanations in this post will help you to develop a practical understanding of the process involved in building a filterable image gallery.

Steps for a Filterable Image Gallery in Bootstrap and JavaScript

To create a responsive, filterable image gallery in HTML, Bootstrap and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder.

To start, add the following HTML codes to your index.html file to create a basic layout for the image gallery and filter tabs.




  
    
    Filterable Image Gallery Bootstrap | CodingNepal
    
    
    
    
  
  
    
      
      
        
          
          
          
          
        
      

      
      
        
          
          
            Mountains
            Lorem ipsum dolor..
          
        
        
          
          
            Lights
            Lorem ipsum dolor..
          
        
        
          
          
            Nature
            Lorem ipsum dolor..
          
        
        
          
          
            Retro
            Lorem ipsum dolor..
          
        
        
          
          
            Fast
            Lorem ipsum dolor..
          
        
        
          
          
            Classic
            Lorem ipsum dolor..
          
        
        
          
          
            Men
            Lorem ipsum dolor..
          
        
        
          
          
            Girl
            Lorem ipsum dolor..

Next, add the following CSS codes to your style.css file to style the image gallery and make it interactive and beautiful. Since we’ve used Bootstrap, we don’t need to write more CSS.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #f1f1f1 !important;
}

body .container {
  max-width: 1100px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {
  width: 15rem;
  border: 2px solid transparent;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

Finally, add the following JavaScript code to your script.js file to make the image gallery filterable when the user clicks on a specific filter tab.

// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");

// Function to filter cards based on filter buttons
const filterCards = (e) => {
    document.querySelector("#filter-buttons .active").classList.remove("active");
    e.target.classList.add("active");

    filterableCards.forEach(card => {
        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
            return card.classList.replace("hide", "show");
        }
        card.classList.add("hide");
    });
}

filterButtons.forEach(button => button.addEventListener("click", filterCards));

Conclusion and Final Words

I hope this blog post has provided you with the necessary knowledge to build your own filterable image gallery using HTML, Bootstrap, and JavaScript. The coding process was designed to be both intuitive and easy to understand, allowing you to tailor your gallery to your specific needs.

However, if you’re interested in exploring a pure CSS, HTML, and JavaScript approach, I recommend checking out my blog on creating a Responsive Filterable Image Gallery using these technologies. This will provide you with an alternative approach to achieving the same goal, and allow you to expand your web development skillset even further.

In case you face any issues or your code is not performing as intended, you can access the source code files for this filterable image gallery at no cost. Simply click on the download button to get the zip file that contains the project folder with all the necessary source code files and images.

Responsive Filterable Image Gallery using HTML CSS & JavaScript

CodingNepal — Sat, 26 Dec 2020 11:07:00 +0000

Hey friends, today in this blog you’ll learn how to create a Responsive Filterable Image Gallery using HTML CSS & JavaScript. In the earlier blog, I’ve shared how to create an Image Slider with Slide Controls in JavaScript and now it’s time to create a Responsively Filterable Gallery.

A filterable image gallery means you can display as many images as you want. The most important feature of Filterable Image Gallery is that you will have the control to categorize all the pictures or images based on the specified parameter.

In this design [Responsive Filterable Image Gallery], there are a total of eight images on the webpage with the filter names navbar on the top. These images are specified to the different categories, when you click on the bag, there is only appear the bag-related image, and when you click on the watch, there will appear watch-related images only.

Each image has a click event means when you click on the particular image, that image will appear in a full image preview box with the category name and there is also a cross icon, so you can easily dismiss or close the preview box.

If you want to see this filterable image gallery and how it is created then you can watch a full video tutorial on this program.

Video Tutorial of Responsive Filterable Image Gallery

In the video, you have seen the responsive filterable image gallery which is created using HTML CSS & JavaScript. You can also create this type of filterable gallery easily using many jQuery or JavaScript plugins. If you’re a beginner then you may have difficulties to understanding the JavaScript codes of this program but I did my best to explain each JavaScript line with written comments. So you’ll easily understand the codes once you download the files and try them yourself.

In this program, I didn’t add an image slideshow or image slider controls feature because this video is already too much longer so I decided to add these features and make a separate video for it. In that video, I’ll add slider controls on the preview box so you can easily slide images.

Responsive Filterable Image Gallery [Source Codes]

To create this program [Filterable Image Gallery]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of his image gallery from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this gallery won’t appear. You’ve to download files from the given download button to use images also.





    
    
    Filterable Image Gallery | CodingNepal
    
    


  
    
    
      
        All
        Bag
        Shoe
        Watch
        Camera
        Headphone
      
    
    
    
      
      
      
      
      
      
      
      
    
  
  
  
    
      Image Category:

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #fff;
  background: #007bff;
}
body{
  padding: 10px;
}
.wrapper{
  margin: 100px auto;
  max-width: 1100px;
}
.wrapper nav{
  display: flex;
  justify-content: center;
}
.wrapper .items{
  display: flex;
  max-width: 720px;
  width: 100%;
  justify-content: space-between;
}
.items span{
  padding: 7px 25px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #007bff;
  border-radius: 50px;
  border: 2px solid #007bff;
  transition: all 0.3s ease;
}
.items span.active,
.items span:hover{
  color: #fff;
  background: #007bff;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.gallery .image{
  width: calc(100% / 4);
  padding: 7px;
}
.gallery .image span{
  display: flex;
  width: 100%;
  overflow: hidden;
}
.gallery .image img{
  width: 100%;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.gallery .image:hover img{
  transform: scale(1.1);
}
.gallery .image.hide{
  display: none;
}
.gallery .image.show{
  animation: animate 0.4s ease;
}
@keyframes animate {
  0%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
}

.preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;
  width: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.preview-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease;
}
.preview-box .details{
  padding: 13px 15px 13px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.details .title{
  display: flex;
  font-size: 18px;
  font-weight: 400;
}
.details .title p{
  font-weight: 500;
  margin-left: 5px;
}
.details .icon{
  color: #007bff;
  font-style: 22px;
  cursor: pointer;
}
.preview-box .image-box{
  width: 100%;
  display: flex;
}
.image-box img{
  width: 100%;
  border-radius: 0 0 3px 3px;
}
.shadow{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0,0,0,0.4);
}
.shadow.show{
  display: block;
}

@media (max-width: 1000px) {
  .gallery .image{
    width: calc(100% / 3);
  }
}
@media (max-width: 800px) {
  .gallery .image{
    width: calc(100% / 2);
  }
}
@media (max-width: 700px) {
  .wrapper nav .items{
    max-width: 600px;
  }
  nav .items span{
    padding: 7px 15px;
  }
}
@media (max-width: 600px) {
  .wrapper{
    margin: 30px auto;
  }
  .wrapper nav .items{
    flex-wrap: wrap;
    justify-content: center;
  }
  nav .items span{
    margin: 5px;
  }
  .gallery .image{
    width: 100%;
  }
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

//selecting all required elements
const filterItem = document.querySelector(".items");
const filterImg = document.querySelectorAll(".gallery .image");

window.onload = ()=>{ //after window loaded
  filterItem.onclick = (selectedItem)=>{ //if user click on filterItem div
    if(selectedItem.target.classList.contains("item")){ //if user selected item has .item class
      filterItem.querySelector(".active").classList.remove("active"); //remove the active class which is in first item
      selectedItem.target.classList.add("active"); //add that active class on user selected item
      let filterName = selectedItem.target.getAttribute("data-name"); //getting data-name value of user selected item and store in a filtername variable
      filterImg.forEach((image) => {
        let filterImges = image.getAttribute("data-name"); //getting image data-name value
        //if user selected item data-name value is equal to images data-name value
        //or user selected item data-name value is equal to "all"
        if((filterImges == filterName) || (filterName == "all")){
          image.classList.remove("hide"); //first remove the hide class from the image
          image.classList.add("show"); //add show class in image
        }else{
          image.classList.add("hide"); //add hide class in image
          image.classList.remove("show"); //remove show class from the image
        }
      });
    }
  }
  for (let i = 0; i < filterImg.length; i++) {
    filterImg[i].setAttribute("onclick", "preview(this)"); //adding onclick attribute in all available images
  }
}

//fullscreen image preview function
//selecting all required elements
const previewBox = document.querySelector(".preview-box"),
categoryName = previewBox.querySelector(".title p"),
previewImg = previewBox.querySelector("img"),
closeIcon = previewBox.querySelector(".icon"),
shadow = document.querySelector(".shadow");

function preview(element){
  //once user click on any image then remove the scroll bar of the body, so user cant scroll up or down
  document.querySelector("body").style.overflow = "hidden";
  let selectedPrevImg = element.querySelector("img").src; //getting user clicked image source link and stored in a variable
  let selectedImgCategory = element.getAttribute("data-name"); //getting user clicked image data-name value
  previewImg.src = selectedPrevImg; //passing the user clicked image source in preview image source
  categoryName.textContent = selectedImgCategory; //passing user clicked data-name value in category name
  previewBox.classList.add("show"); //show the preview image box
  shadow.classList.add("show"); //show the light grey background
  closeIcon.onclick = ()=>{ //if user click on close icon of preview box
    previewBox.classList.remove("show"); //hide the preview box
    shadow.classList.remove("show"); //hide the light grey background
    document.querySelector("body").style.overflow = "auto"; //show the scroll bar on body
  }
}

That’s all, now you’ve successfully created a Responsive Filterable Image Gallery using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Filterable Image Gallery – CodingNepal

Responsive Filterable Image Gallery in HTML Bootstrap & JavaScript

Steps for a Filterable Image Gallery in Bootstrap and JavaScript

Mountains

Lights

Nature

Retro

Fast

Classic

Men

Girl

Conclusion and Final Words

Responsive Filterable Image Gallery using HTML CSS & JavaScript

Video Tutorial of Responsive Filterable Image Gallery

You might like this:

Responsive Filterable Image Gallery [Source Codes]