1. Home
  2. Docs
  3. Blue Pro
  4. Filterable Portfolio

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
[code language=”html”]
<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>
[/code]

2. Add data-filter as class in your items
[code language=”html”]
<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>
[/code]

3. Then Initialize them in jQuery with isotope to work perfectly
[code language=”html”]
/* ========================================================================= */
/* 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;
});
[/code]

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

Was this article helpful to you? Yes No

How can we help?