Home Web Development JavaScript Portfolio Filter Gallery HTML CSS & JavaScript | Image Category Filtering

Portfolio Filter Gallery HTML CSS & JavaScript | Image Category Filtering

July 3, 2019

24693

How we can create a portfolio filtering using HTML CSS & JavaScript? Solution: Portfolio Filter Gallery With HTML CSS & JavaScript. In Other Words, Simple Image Category Filtering.

When we visit the portfolio section on any website, there we can see different categories. Suppose we visit a designer website then we can see his/her works, with all the photos we will see categories like Mockup, Web Template, etc. If we click on Web Template then only template design will appear, left others will hide automatically. That is Portfolio Filtering.

Today you will learn to create a portfolio category filtering, Using this you can filter out images by categories. This program will very helpful for any type of website. This portfolio has a flat design, you will definitely like to add on your website. This portfolio filter program very easy to understand, you can modify & recreate it easily.

So, Today I am sharing Portfolio Filter Gallery With HTML CSS & JavaScript. Basically, this is Images Category Filtering program, it can show images sort by categories. At first, it will show all images when you click on a single category then it will show images of the particular category. In short, we can filter images using this category filtering program.

If you are thinking now how this Portfolio Filter Gallery actually is, then see the preview given below.

Preview of CSS Flat Portfolio With Filtering

See this video preview to getting an idea of how this flat portfolio looks like.

Now you can see this visually. If you like this then get the source code of its.

Portfolio Filter Gallery HTML CSS and JavaScript Source Code

Before sharing source code, let’s talk about it. As you know I have used HTML, CSS, & JavaScript for creating this program. Also with these, I used bootstrap to creating the layout easily. I just added bootstrap’s CDN Link in between head tags and used grid properties like container-fluid, col-md, etc.

I have created two compartments, First for category buttons second for images. In both, I have placed data-class=" ", The data-* attribute is used to store custom data. This data-class helps to connect categories with images. For example, I put ‘design‘ value for the web design category inside the data-class now I put the same data-class on all images related to web design.

In CSS sections, I placed all category divs and images in the right place. Left other things, like hover color, link active color, etc is handled by CSS. This program has a responsive design using CSS @media query. On small screens, a single image will cover fully width & get positioned by top to bottom.

Using JavaScript, I fetched the list of categories I have created in HTML file, & fetched all the images also. After that, I have created a function of if-else. Created the condition, when we click on all the all images with visible but when we will click on a single category then only images will visible of the category. This condition is possible using a loop, which runs 0 to all images count.

That is the concept of filtering portfolio, I think I gave all important information left other things you will understand easily after getting the codes. For creating this program you have to create 3 files, first for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any trouble.

index.html

Create an HTML file named index.html and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com )  -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Portfolio Filter | Webdevtrick.com</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
      <link rel="stylesheet" href="style.css">
  
</head>

<body>

  <section class="main text-center">
  <div class="container">
    <h1>JAVASCRIPT PORTFOLIO FILTER</h1>
    <p>This is a HTML CSS &amp; JavaScript prtfolio filter, You can call this sorting images by category order. The layout design is based on Bootstrap. This Example &amp; Source Code By <a href="https://webdevtrick.com">Webdevtrick</a></p>
    <ul class="list-unstyled row">
      <li class="col-md active" data-class="all">ALL</li>
      <li class="col-md" data-class="design">WEB DESIGN</li>
      <li class="col-md" data-class="development">WEB DEVELOPMENT</li>
      <li class="col-md" data-class="graphic">GRAPHIC DESIGN</li>
      <li class="col-md" data-class="seo">SEARCH ENGINE</li>
      <li class="col-md" data-class="ui">UI / UX</li>
    </ul>
  </div>
  <div class="container-fluid ">
    <div class="col-md-3 images" data-class="ui">
      <img src="https://picsum.photos/300/200?random=1" alt="">
    </div>
    <div class="col-md-3 images" data-class="development">
      <img src="https://picsum.photos/300/200?random=2" alt="">
    </div>
    <div class="col-md-3 images" data-class="ui">
      <img src="https://picsum.photos/300/200?random=3" alt="">
    </div>
    <div class="col-md-3 images" data-class="design">
      <img src="https://picsum.photos/300/200?random=4" alt="">
    </div>
    <div class="col-md-3 images" data-class="development">
      <img src="https://picsum.photos/300/200?random=5" alt="">
    </div>
    <div class="col-md-3 images" data-class="design">
      <img src="https://picsum.photos/300/200?random=6" alt="">
    </div>
    <div class="col-md-3 images" data-class="graphic">
      <img src="https://picsum.photos/300/200?random=7" alt="">
    </div>
    <div class="col-md-3 images" data-class="seo">
      <img src="https://picsum.photos/300/200?random=8" alt="">
    </div>
  </div>
</section>
 
    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Portfolio Filter | Webdevtrick.com</title>

</head>

<body>

<h1>JAVASCRIPT PORTFOLIO FILTER</h1>

<p>This is a HTML CSS & JavaScript prtfolio filter, You can call this sorting images by category order. The layout design is based on Bootstrap. This Example & Source Code By <a href="https://webdevtrick.com">Webdevtrick</a></p>

<li class="col-md" data-class="design">WEB DESIGN</li>

<li class="col-md" data-class="development">WEB DEVELOPMENT</li>

<li class="col-md" data-class="graphic">GRAPHIC DESIGN</li>

<li class="col-md" data-class="seo">SEARCH ENGINE</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
.main{
    padding: 50px 0;
}

.main h1{
    font-size: 42px;
    color: #333;
    font-weight: 700;
}

.main p{
    font-size: 18px;
    color: #687074;
    width: 70%;
    margin: 15px auto;
}

.main p a {
	text-decoration: none;
	color: #ec1c23;
	font-weight: 900;
}

.main ul{
    margin-top: 50px;
}

.main ul li{
    padding: 10px 15px;
    border: 2px solid #333;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .5s ease;
	color: #333;
}

.main ul li.active,
.main ul li:hover{
    background-color: #ec1c23;
    color: #FFF;
    border: 2px solid #ec1c23;
}

.main ul li:last-of-type{
    margin-right: 0 ;
}

.main ul li:nth-of-type(3),
.main ul li:nth-of-type(4),
.main ul li:nth-of-type(5){
    flex-grow: 2
}

.main .container-fluid{
  overflow: hidden;
  padding: 0;
}

.main .container-fluid .col-md-3{
    padding: 0;
    float: left;
    transition: all 5s ease-in-out
}

.main .container-fluid img{
    width: 100%
}

@media (max-width: 767px){
    .main .container-fluid img{
        margin-bottom: 15px
    }
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

.main{

padding: 50px 0;

}

.main h1{

font-size: 42px;

color: #333;

font-weight: 700;

}

.main p{

font-size: 18px;

color: #687074;

width: 70%;

margin: 15px auto;

}

.main p a {

text-decoration: none;

color: #ec1c23;

font-weight: 900;

}

.main ul{

margin-top: 50px;

}

.main ul li{

padding: 10px 15px;

border: 2px solid #333;

margin-right: 10px;

margin-bottom: 10px;

font-weight: 700;

cursor: pointer;

transition: all .5s ease;

color: #333;

}

.main ul li.active,

.main ul li:hover{

background-color: #ec1c23;

color: #FFF;

border: 2px solid #ec1c23;

}

.main ul li:last-of-type{

margin-right: 0 ;

}

.main ul li:nth-of-type(3),

.main ul li:nth-of-type(4),

.main ul li:nth-of-type(5){

flex-grow: 2

}

.main .container-fluid{

overflow: hidden;

padding: 0;

}

.main .container-fluid .col-md-3{

padding: 0;

float: left;

transition: all 5s ease-in-out

}

.main .container-fluid img{

width: 100%

}

@media (max-width: 767px){

.main .container-fluid img{

margin-bottom: 15px

}

function.js

The last step, create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
const listItems = document.querySelectorAll('.main li');
const allimages = document.querySelectorAll('.main .container-fluid .images');

function toggleActiveClass(active){
    listItems.forEach(item => {
      item.classList.remove('active');
    })
    active.classList.add('active');
}

function toggleimages(dataClass){
    if(dataClass === 'all'){
        for(let i = 0; i<allimages.length; i++){
            allimages[i].style.display = 'block';
        }
    }else{
        for(let i = 0; i<allimages.length; i++)
            allimages[i].dataset.class === dataClass ? allimages[i].style.display = 'block' : allimages[i].style.display = 'none';
    }
}

for(let i = 0; i < listItems.length; i++){
    listItems[i].addEventListener('click', function(){
        toggleActiveClass(listItems[i]);
        toggleimages(listItems[i].dataset.class);
    });
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

const listItems = document.querySelectorAll('.main li');

const allimages = document.querySelectorAll('.main .container-fluid .images');

function toggleActiveClass(active){

listItems.forEach(item => {

item.classList.remove('active');

})

active.classList.add('active');

}

function toggleimages(dataClass){

if(dataClass === 'all'){

for(let i = 0; i<allimages.length; i++){

allimages[i].style.display = 'block';

}

}else{

for(let i = 0; i<allimages.length; i++)

allimages[i].dataset.class === dataClass ? allimages[i].style.display = 'block' : allimages[i].style.display = 'none';

}

for(let i = 0; i < listItems.length; i++){

listItems[i].addEventListener('click', function(){

toggleActiveClass(listItems[i]);

toggleimages(listItems[i].dataset.class);

});

}

That’s It. Now you have successfully created Portfolio Filter Gallery Using HTML CSS & JavaScript, an Image Category Filtering program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

Gilles vk July 27, 2019 At 9:42 pm

Same tutorial with css smooth animation transitions on items would be great.

Reply
- shaan July 28, 2019 At 3:57 am
  
  sure.
  
  Reply
anant January 23, 2020 At 12:44 pm

Portfolio Filter Gallery HTML CSS & JavaScript | Image Category Filtering(please make same image gallery in php mysqli and category name and their respective images fetch from database)
Please make this image gallery in php and mysqli :
in this in li section heading or category name shows from database and cahnge images according to category name.

Reply
emre June 29, 2021 At 1:51 pm

Hello how can i this gallery with select option

Reply
HP December 24, 2021 At 12:31 pm

Hi,
How can i define any specific category on page load itself, is it possible and how ?

Reply