Skip to content

Instantly share code, notes, and snippets.

@raselahmed7
Created January 5, 2015 17:36
Show Gist options
  • Save raselahmed7/c6d6cc97c2c8a93fe7c3 to your computer and use it in GitHub Desktop.
Save raselahmed7/c6d6cc97c2c8a93fe7c3 to your computer and use it in GitHub Desktop.
jQuery isotope filter
jQuery(document).ready(function($){
$(".all-portfolios").isotope({
itemSelector: '.single-portfolio',
layoutMode: 'fitRows',
});
$('ul.filter li').click(function(){
$("ul.filter li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr('data-filter');
$(".all-portfolios").isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
<div class="portfolio-filter text-uppercase text-center">
<ul class="filter">
<li class="active" data-filter="*">All</li>
<li data-filter=".web-design">Web Design</li>
<li data-filter=".graphic">Graphic</li>
<li data-filter=".photography">Photography</li>
<li data-filter=".motion-video">Motion video</li>
</ul>
</div>
<div class="all-portfolios">
<div class="single-portfolio web-design">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio graphic">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio photography motion-video">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio web-design">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio graphic web-design">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio web-design">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio graphic">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio motion-video">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio motion-video">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio graphic photography">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio motion-video">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
<div class="single-portfolio photography">
<img class="img-responsive" src="http://placehold.it/285x220" alt="">
</div>
</div>
.portfolio-filter {}
ul.filter {color: #2e2e2e}
ul.filter li{display: inline-block;font-size: 16px;font-weight: 400;padding-right: 25px;padding-left: 25px;position: relative;cursor: pointer}
ul.filter li.active{color: #549DC5}
ul.filter li:after{content: "/";position: absolute;right: 0;top: 0;color: #B4B4B4}
ul.filter li:last-child{}
ul.filter li:last-child:after{display: none}
.all-portfolios {margin-top: 20px;margin-left: -10px}
.single-portfolio {float: left;
margin-bottom: 10px;
margin-left: 10px;
width: 277px;}
@salmanbd96
Copy link

Thanks a lot Brother .
Very Helpful Gist .

@elenakara
Copy link

Hello, thanks a lot.
I am working with the jQuery isotope plugin and would like to display only items from a particular group when the page loads. Currently all of the items are displaying. Do you have any idea how can a particular group when the page loads?

@elenakara
Copy link

I find it. I have to change the parameter * in the isotope.pkgd.min file and fix my html files.
Have a nice day

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment