codemediaweb.com

Code Media

hire me

Filterable Image Gallery using HTML CSS & JavaScript

by
Filterable Image Gallery using HTML CSS JavaScript

In this article, I have shown how to create a Filterable Image Gallery using HTML CSS, and JavaScript. If you visit any e-commerce website you will find such Responsive Filter Image Gallery there.

It is a kind of modern gallery that keeps a large number of images neatly arranged in one place. The best point is that the user can filter the images of his choice. There is a navigation bar that lists the different categories. 

When you click on that category, all the things in that category can be seen. As a result, the user will be able to easily find the images of his choice. We have made this Filterable Image Gallery fully responsive using CSS’s @media.

 Below I have given a live demo that will help you to know more about this design. Here you will find the required source code which you can easily copy and use in your own work.

See the Pen Pure Javascript filterable image gallery by Raj Template (@RajTemplate) on CodePen.

First I designed the webpage completely. Then I used 9 images here. Although you can use as many images as you want. 

Along with this, there is a navigation bar where I have listed different categories. Whenever you click on a specific category, the images in that category will appear and the rest of the images will be hidden.

Responsive Filterable Image Gallery using Javascript

In the following tutorial, I have shown step by step how I have created this Responsive Filterable Image Gallery. This requires you to have knowledge of basic HTML CSS and JavaScript. 

With the help of HTML, I have added more structures and necessary images. The CSS code helped to design it completely and to determine a certain size and position of the images. JavaScript helped to make this filter work. 

Below the article, you will find a download button where you can download the source code if needed.

Step 1: Create the basic structure of the Gallery

I have created the basic structure of this Image Gallery using the following HTML and CSS code. This basic structure will contain the completed image and the navigation bar.

<section class=”gallery”>
 <div class=”container”>
 </div>
</section>
*{
margin:0;
box-sizing: border-box;
}
body{
line-height: 1.5;
font-family: sans-serif;
}
.container{
max-width: 1170px;
margin:auto;
}
.gallery{
width: 100%;
display: block;
min-height: 100vh;
background-color: #e4e9ec;
padding: 100px 0;
}
Create the basic structure of the Gallery

Step 2: Create a navigation bar for categories

Now is the time to create a navigation bar with the help of the following codes. This navbar will basically list different categories nicely. Here I have used five categories. If you use a lot more images, you can increase the number of categories here.

  <div class=”row”>
    <div class=”gallery-filter”>
      <span class=”filter-item active” data-filter=”all”>all</span>
      <span class=”filter-item” data-filter=”watch”>Watch</span>
      <span class=”filter-item” data-filter=”headphone”>headphone</span>
      <span class=”filter-item” data-filter=”camera”>camera</span>
      <span class=”filter-item” data-filter=”phone”>Phone</span>
    </div>
  </div>
.row{
  display: flex;
  flex-wrap: wrap;
}
.gallery .gallery-filter{
  padding: 0 15px;
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
  color: #1c508b;
  font-size: 17px;
  border: 2px solid #0c539a;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 3px;
  margin-right: 8px;
  cursor: pointer;
  padding: 8px 20px 8px 20px;
  line-height: 1.2;
  transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
  color: white;
  border-color : #0c539a;
  background: #0c539a;
}
Create a navigation bar for categories

Step 3: Add images to Filterable Gallery

Now is the time to add the necessary images to this filtered image gallery. I have used 9 images here but you can add more images if you want.

 Use the download button below to download the completed images. Now I have arranged the images with the help of CSS code. I have used three images in each row.

<div class=”row”>
  <div class=”gallery-item shoe”>
    <div class=”gallery-item-inner”>
      <img src=”shoe-1.jpg” alt=”shoe”>
    </div>
  </div>
  <div class=”gallery-item headphone”>
    <div class=”gallery-item-inner”>
      <img src=”headphone-1.jpg” alt=”headphone”>
    </div>
  </div>
  <div class=”gallery-item camera”>
    <div class=”gallery-item-inner”>
     <img src=”camera-1.jpg” alt=”camera”>
    </div>
  </div>
  <div class=”gallery-item headphone”>
    <div class=”gallery-item-inner”>
     <img src=”headphone-2.jpg” alt=”headphone”>
    </div>
  </div>
  <div class=”gallery-item camera”>
    <div class=”gallery-item-inner”>
     <img src=”camera-2.jpg” alt=”camera”>
    </div>
  </div>
 
  <div class=”gallery-item phone”>
    <div class=”gallery-item-inner”>
     <img src=”phone-1.jpg” alt=”phone”>
    </div>
  </div>
 
  <div class=”gallery-item camera”>
   <div class=”gallery-item-inner”>
     <img src=”camera-3.jpg” alt=”camera”>
   </div>
  </div>
  <div class=”gallery-item watch”>
    <div class=”gallery-item-inner”>
     <img src=”watch-1.jpg” alt=”watch”>
    </div>
  </div>
 
  <div class=”gallery-item watch”>
    <div class=”gallery-item-inner”>
      <img src=”watch-2.jpg” alt=”watch”>
    </div>
  </div>
 </div>
.gallery .gallery-item{
  width: calc(100% / 3);
  padding: 15px;
}
.gallery .gallery-item-inner img{
  width: 100%;
  border: 3px solid white;
  box-shadow: 0px 2px 7px #545558;
}
img{
  max-width: 100%;
  vertical-align: middle;
}
.gallery .gallery-item.show{
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
  0%{
    opacity: 0;
    }
  100%{
    opacity: 1;
    }
}
.gallery .gallery-item.hide{
  display: none;
}
Add images to Filterable Gallery

Step 4: Make Filter Image Gallery Responsive with CSS

Now is the time to make this gallery image gallery responsive. I used @media to make it responsive. Determined a maximum length using @media and then added what would change. 

If you use the desktop, you will see three images in each row. When you use the tab, you can see two images. When using Responsive Filter Image Gallery on mobile, you will see one image in each row.

@media(max-width: 491px){
  .gallery .gallery-item{
     width: 50%;
    }
}
@media(max-width: 467px){
  .gallery .gallery-item{
      width: 100%;
     }
  .gallery .gallery-filter .filter-item{
      margin-bottom: 10px;
     }
}
Make Filter Image Gallery Responsive with CSS

Step 5: Activate the Filterable Image Gallery using JavaScript

Now I have created the ability to filter image galleries using JavaScript. When you click on a menu, the items in that category will be left out and everything else will be hidden.

 const filterContainer = document.querySelector(“.gallery-filter”),
 galleryItems = document.querySelectorAll(“.gallery-item”);

Now I’ve done the filtering using JavaScript’s click function. Here I stipulate that when you click on a specific category, the category image will be available to you. If you have difficulty understanding its JavaScript structure, you can comment on my Instagram (@foolishdeveloper). I will try to answer you directly.

 filterContainer.addEventListener(“click”, (event) =>{
   if(event.target.classList.contains(“filter-item”)){
   
    filterContainer.querySelector(“.active”).classList.remove(“active”);
   
    event.target.classList.add(“active”);
    const filterValue = event.target.getAttribute(“data-filter”);
    galleryItems.forEach((item) =>{
       if(item.classList.contains(filterValue) || filterValue === ‘all’){
        item.classList.remove(“hide”);
        item.classList.add(“show”);
       }
       else{
        item.classList.remove(“show”);
        item.classList.add(“hide”);
       }
    });
   }
 });
Filterable Image Gallery using JavaScript

Now, this Responsive Filterable Image Gallery is absolutely ready to use in any of your projects. If there is any problem then you can definitely let me know by commenting.

Leave a comment