Simple jQuery portfolio with filters
November 05, 2016 | 4705 Views

Simple jQuery portfolio with filters

Learn how to construct a simple portfolio listing or works listing with filters using uncomplicated CSS and jQuery.

Creating The Structure - Using Html

In the design, essentially we have two kinds of layouts, One is the TAB navigation menu and another one is the portfolio listings.

First of all, We have the fundamental HTML structure for "TAB" navigation using ul with data-filters="" for portfolio filters and we have the HTML structure for all portfolio listings. The following are the code to perform the basic structure of the portfolio listing with filters(example).

 <section class="works">
  <div class="works-container">
    <div class="works-category">
      <ul>
        <li><a href="#" class="selected" data-filter="*" id="filter-a">All</a></li>
        <li><a href="#" data-filter="vectors" id="filter-a">Vectors</a></li>
        <li><a href="#" data-filter="web" id="filter-a">Web designs</a></li>
        <li><a href="#" data-filter="graphics" id="filter-a">Graphics</a></li>
        <li><a href="#" data-filter="videos" id="filter-a">Videos</a></li>
      </ul>
    </div><!--end of category menu-->
    <div class="all-works">
          <div class="work-one" data-filter="vectors">
             <a href="#">
               <div class="image-container">
                   <img src="project1.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
          <div class="work-one" data-filter="web">
             <a href="#">
               <div class="image-container">
                   <img src="project2.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
          <div class="work-one" data-filter="web">
             <a href="#">
               <div class="image-container">
                   <img src="project3.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
          <div class="work-one" data-filter="graphics">
             <a href="#">
               <div class="image-container">
                   <img src="project4.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
          <div class="work-one" data-filter="videos">
             <a href="#">
               <div class="image-container">
                   <img src="project5.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
          <div class="work-one" data-filter="vectors">
             <a href="#">
               <div class="image-container">
                   <img src="project6.jpg" alt="work name">
               </div><!--end of image container-->
               <div class="des">
                 <h4>Project Name</h4>
                 <p>Description of the project</p>
               </div><!--end description-->
             </a>
          </div><!--end of work one-->
    </div><!--end of all works listing-->       
  </div><!--end of contaimner-->
 </section>

Add Styling - Using Css

The following are the CSS to perform the styles for the portfolio or image listing.

*{
  box-sizing: border-box;
}
body{
  font-family: 'open-sans', sans-serif;
  background-color: #f3f3f3;
}
.works{
  padding: 5% 10%;
}
.works-container{}
.works-category{}
.works-category ul{
  margin: 0;
  padding: 0;
  clear: both;
  text-align: center;
}
.works-category ul li{
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0 10px;
}
.works-category ul li a{
  color: #ffffff;
  background-color: rgba(0,0,0,0.3);
  padding: 3px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
.works-category ul li a:hover{
  background-color: #566784 
}
.works-category ul li a.selected{
  background-color: #566784 
}
.all-works{
  margin-top: 2%;
  padding: 0 4%;
}
.work-one{
  width: 30%;
  float: left;
  height: auto;
  background-color: #c4c9d1;
  border-radius: 5px;
  padding: 10px;
  margin: 15px;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
  position: relative;
}
.work-one:hover{
  background-color: #566784;
}
.work-one a{
  text-decoration: none;
}
.work-one img{
  width: 100%;
  height: 200px;

}
.des{
  position: absolute;
  bottom: 20px;
    left: 10px;
    right: 10px;
    width: 100%;
    padding: 3px 10px;
}
.des h4{
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
}
.des p{
  padding: 0;
  margin: 0;
  font-size: 12px;
  color:rgba(255,255,255,0.9);
  font-style: italic;
  opacity: 0; 
}
.work-one:hover h4, .work-one:hover p{
  opacity: 1;
}
.filter-hide{
  display: none;
}

Handling The Event - Using JavaScript

The following are the JavaScript code to obtain the Portfolio listings and don't neglect to include jQuery.

$(document).ready(function(){
     $('a#filter-a').click(function(){
       //hide all works by default 
       $(".work-one").addClass('filter-hide');
       //show slected works based on the menu clicked
       $(".work-one[data-filter='"+$(this).attr('data-filter')+"']").removeClass("filter-hide");
       //remove selected class to the link      
       $('a#filter-a').removeClass('selected');
       //add selected class to the active link
       $(this).addClass('selected');
       return false;
      });
      //show all works for "all" menu
     $('a[data-filter="*"]').click(function(event) {    
        $(".work-one").removeClass('filter-hide');
        return false;
     });
});

Live demo

See the Pen jQuery portfolio with filter by themeswild (@themeswild) on CodePen.





Free html templates

Download from a vast library of Open Source HTML & CSS templates and use them for free. No licenses required. Apart from that, do you need to build a whole website from scratch? Write to us anytime and we will get it sorted.

Contact Us

More Links