Implementing Jquery Isotope
I've been trying to implementing the awesome isotope plugin http://isotope.metafizzy.co/index.html I am facing a problem with a filter and am not able to find a workaround for it s
Solution 1:
- Apply the selector classes directly to the
<li>
elements inside<ul class="small-block-grid-2">
and purge the divs from around the images. - Make sure all the img tags are properly closed,
<img ..... />
. - Apply isotope to
<ul class="small-block-grid-2">
HTML
<div id="portfolio-container">
<ul class="small-block-grid-2">
<li class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt="" /></a></li>
...
</ul>
</div>
javascript
var $container = $('.small-block-grid-2');
// initialize isotope
$container.isotope({
// options...
});
// filter items when filter link is clicked
$('#portfolio-filter li a').on('click', function() {
var selector = $(this).data('filter');
$container.isotope({
filter: selector
});
return false;
});
Post a Comment for "Implementing Jquery Isotope"