I've been trying to implementing the awesome isotope plugin http://isotope.metafizzy.co/index.htmlI am facing a problem with a filter and am not able to find a workaround for it so far: What is happening is that when "ALL" filter link is clicked, all items are displayed but when any other filter link is clicked, all the items disappear. I would really appreciate some help
I have set up a JSFiddle And here's the code:HTML:<div class="large-12 columns"> <ul id="portfolio-filter"> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter="*">ALL</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".website">WEBSITE</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".logos">LOGOS</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".illustrations">ILLUSTRATIONS</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".brand">BRAND</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".ui">UI</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".icons">ICONS</a></li> </ul> <div id="portfolio-container"> <ul class="small-block-grid-2"> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-01.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-02.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-03.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-04.jpg" alt=""></a></div></li> <li><div class="ui"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-05.jpg" alt=""></a></div></li> <li><div class="icons"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-06.jpg" alt=""></a></div></li> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-07.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-08.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-09.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-10.jpg" alt=""></a></div></li> <li><div class="ui"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-11.jpg" alt=""></a></div></li> <li><div class="icons"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-12.jpg" alt=""></a></div></li> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-13.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-14.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-15.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-16.jpg" alt=""></a></div></li> </ul> </div><!-- /portfolio-container --></div><!-- /large-12 columns -->JavaScript:$(document).ready(function(){ // cache container var $container = $('#portfolio-container'); // initialize isotope $container.isotope({ // options... }); // filter items when filter link is clicked $('#portfolio-filter li a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; });});
I have set up a JSFiddle And here's the code:HTML:<div class="large-12 columns"> <ul id="portfolio-filter"> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter="*">ALL</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".website">WEBSITE</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".logos">LOGOS</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".illustrations">ILLUSTRATIONS</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".brand">BRAND</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".ui">UI</a></li> <li><a href="http://stackoverflow.com/questions/15592745/#" data-filter=".icons">ICONS</a></li> </ul> <div id="portfolio-container"> <ul class="small-block-grid-2"> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-01.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-02.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-03.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-04.jpg" alt=""></a></div></li> <li><div class="ui"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-05.jpg" alt=""></a></div></li> <li><div class="icons"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-06.jpg" alt=""></a></div></li> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-07.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-08.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-09.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-10.jpg" alt=""></a></div></li> <li><div class="ui"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-11.jpg" alt=""></a></div></li> <li><div class="icons"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-12.jpg" alt=""></a></div></li> <li><div class="website"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-13.jpg" alt=""></a></div></li> <li><div class="logos"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-14.jpg" alt=""></a></div></li> <li><div class="illustrations"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-15.jpg" alt=""></a></div></li> <li><div class="brand"><a href="http://stackoverflow.com/questions/15592745/#"><img src="http://stackoverflow.com/questions/15592745/img/portfolio/small-16.jpg" alt=""></a></div></li> </ul> </div><!-- /portfolio-container --></div><!-- /large-12 columns -->JavaScript:$(document).ready(function(){ // cache container var $container = $('#portfolio-container'); // initialize isotope $container.isotope({ // options... }); // filter items when filter link is clicked $('#portfolio-filter li a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; });});