Free Coding Ebook 👉 Get Now
Create Filterable Image Gallery using 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?😔
Hello Coder! Today we will create a filterable Image Gallery using HTML, CSS, and JavaScript. We have four Image Galley Sections but if you click on the shoe then only the shoe photo shows, that’s called a filterable Image Gallery. You can use This functionality in a Portfolio project, image gallery project, and any of your project show or content filter in this same way.
ADVERTISEMENT
50+ HTML, CSS & JavaScript Projects With Source Code
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 Filterable Image Gallery:-
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 |
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Note: This is a beginner-level project. Which is coded with the help of HTML, CSS and 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 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. Then don’t be upset now. Let’s have a quick intro part of HTML.
by this morning. I was simply considering the raw materials and the design process as I imagined constructing a car—not one on paper. What would you do if you were at my house? You attempt the same method: you first write a rough sketch of the car on paper, bring it outside, and then startle yourself into believing that you have finished the layout of your vehicle. I’m hoping 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.
Below is this written code.
Every web page has the main section:-
- Header(Navigation bar, logo etc.
- Main section (main-content).
- Footer.
Portfolio Website using HTML and CSS (Source Code)
Why I’m mentioning this firstly for giving an idea and we 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.
<!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 favorite ones.
That’s done with the HTML section.
Have a look below at 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.😔
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.
- Flexbox.
- CSS basic(selector, color 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.
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. 👇
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 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
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 will hide.
For better understanding until 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 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.
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.
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/