Filterable Portfolio

Isotope plugin is being used in the project to filter the portfolio item in this template.

Follow the steps for customization

1. Create all filter menu with data-filter

<ul class="portfolio-filter text-center">
 <li><a href="#" data-filter="\*" class="active">All</a></li>
 <li><a href="#" data-filter=".photoshop">Photoshop</a></li>
 <li><a href="#" data-filter=".responsive">Responsive</a></li>
 <li><a href="#" data-filter=".wordpress">WordPress</a></li>
 <li><a href="#" data-filter=".illustrator">Illustrator</a></li>
</ul>

2. Add data-filter as class in your items

<div class="row project-wrapper">
 <div class="col-sm-6 col-md-4 photoshop">
 <div class="portfolio-item">
 ..  
 </div>
 </div>

 <div class="col-sm-6 col-md-4 responsive">
 <div class="portfolio-item">
 ..  
 </div>
 </div>

 <div class="col-sm-6 col-md-4 wordpress">
 <div class="portfolio-item">
 ..  
 </div>
 </div>

 <div class="col-sm-6 col-md-4 illustrator">
 ..  
 </div>

 <div class="col-sm-6 col-md-4 photoshop">
 <div class="portfolio-item">
 ..  
 </div>
 </div>

 <div class="col-sm-6 col-md-4 illustrator">
 <div class="portfolio-item">
 ..  
 </div>
 </div>
</div>

3. Then Initialize them in jQuery with isotope to work perfectly

/\* ========================================================================= \*/  
/\* Portfolio  
/\* ========================================================================= \*/  
var $projectWrapper = $(‘.project-wrapper’);  
$projectWrapper.isotope({  
 filter: ‘\*’,  
 animationOptions: {  
 duration: 750,  
 easing: ‘linear’,  
 queue: false  
 }  
});

$(‘.portfolio-filter a’).click(function(){  
 $(‘.portfolio-filter .active’).removeClass(‘active’);  
 $(this).addClass(‘active’);

 var selector = $(this).attr(‘data-filter’);  
 $projectWrapper.isotope({  
 filter: selector,  
 animationOptions: {  
 duration: 750,  
 easing: ‘linear’,  
 queue: false  
 }  
 });  
 return false;  
});  

If you want to know more about isotope plugin and it’s settings then follow the link – https://isotope.metafizzy.co/