Image Gallery Filter using HTML,CSS and JavaScript

How to Create Filterable Image Gallery using JavaScript

Creating Filterable Image Gallery Using JavaScript

 Do you also get frustrated when you try to search for your favorite item from a bunch of items and still aren’t able to find it?😔 

Hello Coders! Have you ever thought of making a filter gallery, if not? Let us learn to create a filterable Image Gallery using HTML, CSS, and JavaScript.For better understanding let’s first understand the concept of a filterable image gallery.

What is a filterable image gallery?

A filterable image gallery is nothing but a set of images of the same type under the same section so that users of the website are able to search the relevant information easily by saving time.

We have an example of a filter gallery codepen to make it clearer, suppose four image galley sections are there i.e. ALL, SHOE, HEADPHONE, CAMERA, if you click on the SHOE then only images under SHOE would be displayed, that’s called a filterable Image Gallery. You can use this functionality in a Portfolio project, image gallery project, and in any of your projects.

50+ HTML, CSS & JavaScript Projects With Source Code

 

Filterable Image Gallery
                                                                                                            Image Gallery Filter using HTML, CSS, and JavaScript

So learners! Stay tuned with this blog till the end because today we’ll explore how we can make a filterable image gallery using JavaScript with a brief discussion. In the end, you’re gonna be blown away because you will be with the new mini-project that will make you delighted as you have won over your problem.

 

Image Gallery Filter using HTML,CSS and JavaScript
Image Gallery Filter using HTML, CSS, and JavaScript

Before discussing the procedure to make our mini-project. Let’s have a quick live view of our project, and how it’s gonna look.

Live Preview Of Filterable Image Gallery:-

What! No no… You don’t need a master’s degree in front-end development for this project. This blog is only for you. Just keep your hand free from scrolling down to know more in steps.😁

Code byAnkit Kumar
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesNo
ResponsiveYes
Image Gallery Filter Table

 

ADVERTISEMENT

ADVERTISEMENT

 

ADVERTISEMENT

Note:   This is a beginner-level project. Which is coded with the help of HTML, CSS, and the basics of Javascript.

ADVERTISEMENT

This is only a prerequisite for this project and if you are facing any problems with these concepts or if you want to read these for a quick review. Then feel free to check out more blogs of code with random.

ADVERTISEMENT

 

Tools and technology used for this mini-project of filter gallery are:- 

  • HTML
  • CSS
  • JAVASCRIPT(ES6) – BASICS

The main task of our mini-project.

  • We have to make a simple single-page website in which we will add some images of a different kind (I chose tech stuff images.) and with buttons as many types of stuff we have, will use for filtration.

HTML Code For Filterable Image Gallery:-

You are reading this blog. So, I’m assuming that you must have gone through the role-play of HTML. What is this? and Why it is used.

If you don’t know. Let’s have a quick intro part of HTML.

A few days ago, I was simply wondering about the raw materials and the design process to make something, and that was constructing a car—not one on paper. What would you do if you were at my place? You would have attempted the same method: the first step would be to prepare a rough sketch of the car on paper, and then startle yourself into believing that you have finished the layout of your vehicle. I hope that this imaginative example will inspire you to think of a wonderful, creative HTML concept.

 

HTML does the same job of creating a skeleton system or layout for our website. This is a simple and short explanation of HTML and if want to learn more then check out our blogs.

Every web page has the main section:-

  1. Header(Navigation bar, logo, etc.
  2. Main section (main content).
  3. Footer.

Portfolio Website using HTML and CSS (Source Code)

We are going to work on the main section part only. So, we will not have a header and footer.

I have just designed 4 buttons as we have four stuff only as a title and with strict toward our task.
 

HTML CODE: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>filterable gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<section class="gallery">
    <div class="container">
        <div class="row">
            <div class="gallery-filter">
                <span class="filter-item active" data-filter="all">All</span>
                <span class="filter-item" data-filter="shoe">Shoe</span>
                <span class="filter-item" data-filter="headphone">Headphone</span>
                <span class="filter-item" data-filter="camera">Camera</span>
            </div>
        </div>
        <div class="row">
            <!-- gallery item start -->
            <div class="gallery-item shoe">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/7PJ4yYHh/revolt-164-6w-VEHf-I-unsplash.jpg" alt="shoe">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/zf7MT4q9/istockphoto-1289318271-170667a.jpg" alt="headphone">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item camera">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/vZ7QQdMP/nordwood-themes-F3-Dde-9thd8-unsplash.jpg" alt="camera">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/3xTY15HR/c-d-x-PDX-a-82obo-unsplash.jpg" alt="headphone">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item camera">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/PrYL89TD/patrick-dozk-Vh-Dyvh-Q-unsplash.jpg" alt="camera">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
<img src="https://i.postimg.cc/PqYyN2Nr/ervo-rocks-Zam8-Tv-Eg-N5o-unsplash.jpg" alt="headphone3">
                </div>
            </div>
            <!-- gallery item end -->
        </div>
    </div>
</section>

<script src="js/script.js"></script>
</body>
</html>

HTML Code Explanation:

Firstly as I’m working on the section part I have created a section using div. Then after I took a container using div. Leading the producer I have created two rows one for buttons and the second for different images. There is no issue with images you can choose your favorite ones.

That’s done with the HTML section.
 
 

Have a look below at what it looks like👇

 

Image Gallery filter Using Javascript
Image Gallery Filter Using Javascript

Image Gallery filter Using Javascript
Image Gallery Filter Using Javascript

 

Let’s proceed with the sour imagination of car designing. So we left our work to draft the layout of our car. But it is looking so weird without any attraction. By looking once again it seems like paying a value of garbage.😔

But this is where CSS comes into play and it gives a new look to our car and makes it Tesla comparable. Learners as you have got an idea that we use CSS for the designing part.

The topics that are used in this project.

  1. Flexbox.
  2. CSS basic(selector, color border-box, etc.
  3. pseudo effect(hover, active).
  4. Media queries(responsive) and keyframe(animation).

The below code is for designing our images buttons etc.
 

CSS Code:

body{
    line-height: 1.5;
    font-family: sans-serif;
}
*{
    margin:0;
    box-sizing: border-box;
}
.container{
    max-width: 1170px;
    margin:auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
img{
    max-width: 100%;
    vertical-align: middle;
}
/*.gallery*/
.gallery{
    width: 100%;
    display: block;
    min-height: 100vh;
    background-color: #2a2932;
    padding: 100px 0;
}
.gallery .gallery-filter{
    padding: 0 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.gallery .gallery-filter .filter-item{
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
    display: inline-block;
    margin:0 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
    transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
    color: #ff9800;
    border-color : #ff9800;
}
.gallery .gallery-item{
    width: calc(100% / 3);
    padding: 15px;
}
.gallery .gallery-item-inner img{
    width: 100%;
}
.gallery .gallery-item.show{
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.gallery .gallery-item.hide{
    display: none;
}

/*responsive*/
@media(max-width: 991px){
    .gallery .gallery-item{
        width: 50%;
    }
}
@media(max-width: 767px){
    .gallery .gallery-item{
        width: 100%;
    }	
    .gallery .gallery-filter .filter-item{
        margin-bottom: 10px;
    }
}

The tasks we have done for designing are:

  • As our images are not in a row or the same size after adding that we target the classes of images and give them a flex property to align in a row.
  • we have set margin and padding between images. and buttons.
  • Giving background color to the body and button as well.
  • Applying the hover effect in the button as changing color on hovering.
  • We used a media query, a media query is nothing it is also a tag in CSS that helps us to bring responsiveness to the website.
  • Responsiveness of the website means adjusting itself as per device size and giving a great gesture to the developer.

Gym Website Using HTML,CSS and JavaScript (Source Code)

 Here we have done with our CSS part. This is how we have changed our rough layout website to a beautiful, attractive one. 👇

Image Gallery filter Using Javascript
Image Gallery Filter Using Javascript

Hey…., wait for a second!

what are you saying that your website is not working means the filtration button is not working🤔.

This is coming because we haven’t covered our website completely.

We are left with our Javascript part. The main job of our javascript in our website is to make our websites dynamic or alive.

If I add my car imagination part here also then what last reform we can do with our car? Our car is looking cool but it is showing a stand-alone value because it is not running. so for this, we will add engine in-car some switches for dynamic functionality. By this, we have completed our car imagination design.
 

The same thing we can do with Javascript for our website.

As our main task was adding filtration(as soon as I click on the shoe button it previews only available shoes, not other stuff) in the button this can only be achieved with Javascript.

👇 Below code is the final code with Javascript HTML and CSS.

Html Code For filterable gallery

<!DOCTYPE html>
<html lang="en">
<head>
  <title>filterable gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<section class="gallery">
    <div class="container">
        <div class="row">
            <div class="gallery-filter">
                <span class="filter-item active" data-filter="all">All</span>
                <span class="filter-item" data-filter="shoe">Shoe</span>
                <span class="filter-item" data-filter="headphone">Headphone</span>
                <span class="filter-item" data-filter="camera">Camera</span>
            </div>
        </div>
        <div class="row">
            <!-- gallery item start -->
            <div class="gallery-item shoe">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/7PJ4yYHh/revolt-164-6w-VEHf-I-unsplash.jpg" alt="shoe">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/zf7MT4q9/istockphoto-1289318271-170667a.jpg" alt="headphone">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item camera">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/vZ7QQdMP/nordwood-themes-F3-Dde-9thd8-unsplash.jpg" alt="camera">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/3xTY15HR/c-d-x-PDX-a-82obo-unsplash.jpg" alt="headphone">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item camera">
                <div class="gallery-item-inner">
                    <img src="https://i.postimg.cc/PrYL89TD/patrick-dozk-Vh-Dyvh-Q-unsplash.jpg" alt="camera">
                </div>
            </div>
            <!-- gallery item end -->
            <!-- gallery item start -->
            <div class="gallery-item headphone">
                <div class="gallery-item-inner">
<img src="https://i.postimg.cc/PqYyN2Nr/ervo-rocks-Zam8-Tv-Eg-N5o-unsplash.jpg" alt="headphone3">
                </div>
            </div>
            <!-- gallery item end -->
        </div>
    </div>
</section>

<script src="js/script.js"></script>
</body>
</html>

CSS Code For filterable gallery

body{
    line-height: 1.5;
    font-family: sans-serif;
}
*{
    margin:0;
    box-sizing: border-box;
}
.container{
    max-width: 1170px;
    margin:auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
img{
    max-width: 100%;
    vertical-align: middle;
}
/*.gallery*/
.gallery{
    width: 100%;
    display: block;
    min-height: 100vh;
    background-color: #2a2932;
    padding: 100px 0;
}
.gallery .gallery-filter{
    padding: 0 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.gallery .gallery-filter .filter-item{
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
    display: inline-block;
    margin:0 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
    transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
    color: #ff9800;
    border-color : #ff9800;
}
.gallery .gallery-item{
    width: calc(100% / 3);
    padding: 15px;
}
.gallery .gallery-item-inner img{
    width: 100%;
}
.gallery .gallery-item.show{
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.gallery .gallery-item.hide{
    display: none;
}

/*responsive*/
@media(max-width: 991px){
    .gallery .gallery-item{
        width: 50%;
    }
}
@media(max-width: 767px){
    .gallery .gallery-item{
        width: 100%;
    }	
    .gallery .gallery-filter .filter-item{
        margin-bottom: 10px;
    }
}

JavaScript Code For filterable gallery

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

 filterContainer.addEventListener("click", (event) =>{
   if(event.target.classList.contains("filter-item")){
   	 // deactivate existing active 'filter-item'
   	 filterContainer.querySelector(".active").classList.remove("active");
   	 // activate new 'filter-item'
   	 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");
       }
   	 });
   }
 });

Topic knows before this Javascript code:

  • DOM(Document object model) manipulation.
  • Javascript Basics.
DOM in simple words when we have to play with the structure code of HTML, We use it. So, here also we’ll use as I have sorted all the images as the same type and given it a specific class name that I have a target for each class for a specific function.
 
 

Logic used for this project 

After targeting I used simple logic whenever we clicked on different buttons. It will select the same button only and will preview the stuff which will come under and the rest of this will hide.

For better understanding, you will not code by yourself. You will not get it as much.

Final Output of Filterable Gallery

Finally, we have completed 
By this blog… We have learned HTML, CSS, and Javascript through an example. And also peeked at the image gallery filtration, how we can design.

 

Now I’m looking for your reviews.
So, How was the project 😁, Learners?
 
I didn’t focus much on the design part but it is not a restriction on you. You are free to design your image gallery filtration with more designs. 🎨
 
I hope you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more and new blogs.
 
You can follow me on Instagram 
 
Written by@Ankit kumar

Which code editor do you use for this Image Gallery Filter coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What are the options for image filter in CSS?

1. Blur
2. Contrast.
3. gray scale.
4. opacity.

What is the purpose of using filter?

A method for enhancing or changing a picture is filtering. You can apply a filter to a picture, for instance, to highlight some details or remove others. Smoothing, sharpening, and edge enhancement are three image processing processes that can be applied with filtering.



Tags: ,

This Post Has One Comment

Leave a Reply