Telegram Group Join Now

Filter Image Gallery using HTML,CSS & JavaScript

Are you the same kind of person who gets frustrated when you try to search for your favorite item from a bunch of items and still you get fail to find out?😔

Image Gallery Filter using HTML,CSS and JavaScript

Hey learners!

Here is the solution to your problem. Again welcome to our new blog with Codewithrandom. Stayed 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 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.

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

Live Preview Of Image Gallery Filter

<br /> See the Pen <a href="https://codepen.io/Kumar-Ankit56/pen/JjrNgNJ" rel="nofollow noopener" target="_blank"><br /> Image Gallery filter</a> by Ankit kumar (<a href="https://codepen.io/Kumar-Ankit56" rel="nofollow noopener" target="_blank">@Kumar-Ankit56</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />

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

Code by	Ankit Kumar
Project Download	Link Available Below
Language used	HTML, CSS, and JavaScript
External link / Dependencies	No
Responsive	Yes

Image Gallery Filter Table

Weather App Using Html,Css And JavaScript

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

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.

Tools and technology used for this mini-project 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 SECTION For Image Gallery Filter

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. Then don’t be upset now. Let’s have a quick intro part of HTML.

By today morning. I was just imaging building a car, not on paper one 😁 and thinking about raw materials and the process of designing. If you were at my place what do you do? You also try the same firstly you draft a sketch of the car on paper and then you bring it out on the ground level and you start screaming with joy that I have done my layout part of my car. I hope that this creative example will help you to bring a great imaginative idea about HTML

How To Create OTP Input Field Using HTML , CSS & Javascript

HTML does the same job of creating a skeleton system or layout for our website.

This is a simple and short explanation about HTML and if want to learn more then check out our more blogs.

By below is this written code.

Every web page has the main section:-

Header(Navigation bar, logo etc.
Main section (main-content).
Footer.

Why I’m mentioning this firstly for giving idea and we going to work in 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.

<!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 so 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 favourite ones.

THat’s done with the HTML section.

Have a look below how it looks like👇

Let’s proceed with sour imagination of car designing. So we left our work till drafting 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.😔

50+ Html ,Css & Javascript Projects With Source Code

But this is where CSS comes into play and it gives a new look to our car and makes it tesela compareable😁

Learners as you have got an idea that we use CSS for designing part.

The topics that are used in this project.

Flexbox.
CSS basic(selector, colour border-box, etc.
pseudo effect(hover, active).
Media queries(responsive) and keyframe(animation).

The below code is for designing our images buttons etc.

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

Task 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 aline in a row.
we have set margin and padding between images. and buttons.
Giving background colour to body and button as well.
Applying hover effect in button as changing colour on hovering.
At we used media query, a media query is nothing it is also a tag in CSS that help 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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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

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 that it makes our websites dynamic or alive.

If I add my car imagination part here also then what last reform we can do with our car. As 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 designing.

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 preview 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

<!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

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

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 a simple word when we have to play with 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 to it a specific class name that I have a target each class for a specific function.

Logic

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

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

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.

5+ HTML CSS Projects With Source Code

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 blogger 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.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

Telegram Group Join Now

1 thought on “Filter Image Gallery using HTML,CSS & JavaScript”

ADVERTISEMENT
Unknown

April 2, 2022 at 8:26 pm

The King Casino Company – Ventureberg
It was born in 1934. The Company wooricasinos.info offers luxury hotels, If you don't have a poker https://jancasino.com/review/merit-casino/ room in your house, then you'll find 토토사이트 a poker room in the ventureberg.com/

Telegram Group Join Now

Filter Image Gallery using HTML,CSS & JavaScript

Live Preview Of Image Gallery Filter

The main task of our mini-project.

HTML SECTION For Image Gallery Filter

The topics that are used in this project.

Html Code

Css Code

JavaScript Code

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

is this project responsive or not?

Do you use any external links to create this project?

Telegram Group Join Now

1 thought on “Filter Image Gallery using HTML,CSS & JavaScript”

Leave a Comment Cancel reply