How To Create a Image Gallery with Filtering

Posted on April 4, 2021, 8 p.m. by Bishal     (  10439)

Card Thumbnail
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will make an Image Gallery with filtering using HTML, CSS and, JavaScript. Yes, you saw it right we will make an Image gallery that can be filtered. You can use this Image Gallery on your website, blog to showcase your product etc. Continue reading this blog to take a demo of the Image Gallery. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.

 

What the is Image Gallery with Filtering?

Our awesome, Image Gallery with Filtering gives visitors an easy way to filter images based on the options.

 

How can I use this Image Gallery with Filtering?

You can easily copy the code from our website and can simply paste it anywhere.

 

Do I need to know how to code?

No, you don't really need to know how to code you can simply copy code from here and paste it wherever you want your contact form. Also, you can try it on our website using the "TRY IT NOW" option.

 

What are the advantages of Image Filtering?

Image Filtering is a very good way of showcasing your product to the customer.

 

In this blog, you can learn, how to make an Image Filter using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. Image Filtering is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates an Image Filter for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our Image Filtering using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section].

Some ScreenShots:

Image Gallery

 

Demo

  • ALL
  • Violet
  • Green
  • SUNFLOWER

 

 

Step by step guide for creating the Image Gallery:

  • Create a file with the name index.html

  • Open index.html

  • Add the Broiler plate of HTML

Broiler Plate of HTML

<!DOCTYPE html>
<html>
<head>
<title>Image Gallery - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>

 

  • Now, inside the body, we will add the div items that will work as an Image container.

 

<div class="picture-container">
<ul>
<li data-filter="all">ALL</li>
<li data-filter="Violet"
class="text-Violet">Violet</li>
<li data-filter="Green"
class="text-Green">Green</li>
<li data-filter="sunflower"
class="text-sunflower">SUNFLOWER</li>
</ul>
</div>
<div class="block-cover">
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
</div>

 

  • Create a file script.js

  • Link External JavaScript file with your HTML file

Here is how can you link:

Add these code in the <head>  </head> of your HTML document:

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

 

Now add some JavaScript code to the script.js file:

const filterBox = document.querySelectorAll(".box");
document.querySelector(".picture-container").addEventListener("click",
    (event) => {
        if (event.target.tagName !== "LI") return
        false;
        let filterClass = event.target.dataset["filter"];
        filterBox.forEach((elem) => {
            elem.classList.remove("hide");
            if (!elem.classList.contains(filterClass) && filterClass
                !==
                "all") { elem.classList.add("hide"); }
        });
    });

 

  • Create a file style.css

  • Link External CSS file with your HTML file

Here is how can you link:

Add these code in the <head>  </head> of your HTML document:

<link href="style.css" rel="stylesheet">

 

Now add some CSS code to the style.css file:

.picture-container ul li {
display: inline-block;
padding: 10px 40px 10px 0;
cursor: pointer;
}

.box {
border-radius: 4px;
box-shadow: 6px 7px 28px 0 rgba(16, 16, 16, 0.7);
min-height: 140px;
min-width: calc(22% - 28px);
padding: 0 10px;
margin: 15px;
border-width: 3px;
float: left;
}
.box.Violet {
border: 3px solid #8e44ad;
}
.box.Green {
border: 3px solid #2ecc71;
}
.box.sunflower {
border: 3px solid #f1c40f;
}
.text-Violet {
color: #8e44ad;
}
.text-Green {
color: #2ecc71;
}
.text-sunflower {
color: #f1c40f;
}

.hide {
opacity: 1;
animation-name: slow;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slow {
to {
opacity: 0;
}
}
@media (max-width: 767px) {
.picture-container ul li {
padding: 0;
}
}

 

Source Code

1) HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Image Gallery - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="picture-container">
<ul>
<li data-filter="all">ALL</li>
<li data-filter="Violet"
class="text-Violet">Violet</li>
<li data-filter="Green"
class="text-Green">Green</li>
<li data-filter="sunflower"
class="text-sunflower">SUNFLOWER</li>
</ul>
</div>
<div class="block-cover">
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
</div>
</body>
</html>

 

2) JavaScript Code:

const filterBox = document.querySelectorAll(".box");
document.querySelector(".picture-container").addEventListener("click",
    (event) => {
        if (event.target.tagName !== "LI") return
        false;
        let filterClass = event.target.dataset["filter"];
        filterBox.forEach((elem) => {
            elem.classList.remove("hide");
            if (!elem.classList.contains(filterClass) && filterClass
                !==
                "all") { elem.classList.add("hide"); }
        });
    });

 

3) CSS Code:

.picture-container ul li {
display: inline-block;
padding: 10px 40px 10px 0;
cursor: pointer;
}

.box {
border-radius: 4px;
box-shadow: 6px 7px 28px 0 rgba(16, 16, 16, 0.7);
min-height: 140px;
min-width: calc(22% - 28px);
padding: 0 10px;
margin: 15px;
border-width: 3px;
float: left;
}
.box.Violet {
border: 3px solid #8e44ad;
}
.box.Green {
border: 3px solid #2ecc71;
}
.box.sunflower {
border: 3px solid #f1c40f;
}
.text-Violet {
color: #8e44ad;
}
.text-Green {
color: #2ecc71;
}
.text-sunflower {
color: #f1c40f;
}

.hide {
opacity: 1;
animation-name: slow;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slow {
to {
opacity: 0;
}
}
@media (max-width: 767px) {
.picture-container ul li {
padding: 0;
}
}

 

 

Login to Download Source Code   


Leave a Comment:
Guest
It's a shame you don't have a donate button! I'd definitely donate to this brilliant blog! I suppose for now i'll settle for bookmarking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this website with my Facebook group. Chat soon! ~ buddyrubin


Search
Categories
Recent Posts
How to create CoWin vaccine tracker using PHP
How to create login form using HTML and CSS
Animated typing effect using CSS
CSS Movie Ticket