Today In this article, we’ll show you how to create Responsive Portfolio Filter Gallery Using HTML CSS & JavaScript. This type of Portfolio Gallery is used on the websites For filter specific products or items. This kind of Filterable Gallery looks attractive on website.
You easily create this Portfolio Filter Gallery Using HTML, CSS & JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and javascript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Portfolio Filter Gallery
A filterable image gallery means you can display as many images as you want. The most important feature of Filterable Image Gallery is that you will have the control to categorize all the pictures or images based on the specified parameter.
In this design [Responsive Filterable Image Gallery], there are a total of twenty images on the webpage with the filter names navbar on the top. These images are specified to the different categories, when you click on the button, there is only appear the button-related image, and when you click on the mobile, there will appear mobile related images only.
Watch the video tutorial to create Portfolio Filter Gallery
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Filterable Image Gallery step by step completely beautifully. So you can learn how to make these Filterable Image Gallery. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Filterable Image Gallery Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Navigation Menu Bar In HTML & CSS
- E-commerce Product Card Design Using Bootstrap
- Progress Bar With Counter Using Bootstrap
Filterable Image Gallery | Source Codes
To create this program (Portfolio Filter Gallery). First, you need to create three Files one HTML, CSS and another one is JS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<!-- Created By Codecary -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filterable Image Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<ul>
<li class="list active" data-filter="all">All</li>
<li class="list" data-filter="mobile">Mobile</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
<li class="list" data-filter="shoe">Shoe</li>
<li class="list" data-filter="headphone">Headphone</li>
</ul>
<div class="product">
<div class="itemBox" data-item="mobile"><img src="image/mobile1.jpg"></div>
<div class="itemBox" data-item="camera"><img src="image/camera1.jpg"></div>
<div class="itemBox" data-item="watch"><img src="image/watch1.jpg"></div>
<div class="itemBox" data-item="shoe"><img src="image/shoe1.jpg"></div>
<div class="itemBox" data-item="headphone"><img src="image/headphone1.jpg"></div>
<div class="itemBox" data-item="mobile"><img src="image/mobile2.jpg"></div>
<div class="itemBox" data-item="camera"><img src="image/camera2.jpg"></div>
<div class="itemBox" data-item="watch"><img src="image/watch2.jpg"></div>
<div class="itemBox" data-item="shoe"><img src="image/shoe2.jpg"></div>
<div class="itemBox" data-item="headphone"><img src="image/headphone2.jpg"></div>
<div class="itemBox" data-item="mobile"><img src="image/mobile3.jpg"></div>
<div class="itemBox" data-item="camera"><img src="image/camera3.jpg"></div>
<div class="itemBox" data-item="watch"><img src="image/watch3.jpg"></div>
<div class="itemBox" data-item="shoe"><img src="image/shoe3.jpg"></div>
<div class="itemBox" data-item="headphone"><img src="image/headphone3.jpg"></div>
<div class="itemBox" data-item="mobile"><img src="image/mobile4.jpg"></div>
<div class="itemBox" data-item="camera"><img src="image/camera4.jpg"></div>
<div class="itemBox" data-item="watch"><img src="image/watch4.jpg"></div>
<div class="itemBox" data-item="shoe"><img src="image/shoe4.jpg"></div>
<div class="itemBox" data-item="headphone"><img src="image/headphone4.jpg"></div>
</div>
</section>
<script src="js.js"></script>
</body>
</html>After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section{
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 40px auto;
}
section ul{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
section ul li{
list-style: none;
background: #eee;
padding: 12px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
}
section ul li.active{
background: #03a9f4;
color: #fff;
}
.product{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.product .itemBox{
position: relative;
width: 300px;
height: 300px;
margin: 5px;
display: block;
}
.product .itemBox.hide{
display: none;
}
.product .itemBox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
let list = document.querySelectorAll('.list');
let itemBox = document.querySelectorAll('.itemBox');
for(let i = 0; i<list.length; i++){
list[i].addEventListener('click', function(){
for(let j = 0; j<list.length; j++){
list[j].classList.remove('active');
}
this.classList.add('active');
let dataFilter = this.getAttribute('data-filter');
for(let k = 0; k<itemBox.length; k++){
itemBox[k].classList.remove('active');
itemBox[k].classList.add('hide');
if(itemBox[k].getAttribute('data-item') == dataFilter || dataFilter == "all"){
itemBox[k].classList.remove('hide');
itemBox[k].classList.add('active');
}
}
})
}now you’ve successfully created these Filterable Image Gallery. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.
