I have a portfolio page with a loop that shows all posts from the “Portfolio” category.
Within this category I have three more categories, Illustration, Branding, and Web.
I want to be able to filter the posts depending on which category is selected.
I’m trying this:
< div id="filter-category">
< a class="button" href="#" data-filter="*" class="current">Show All
< a class="button" href="#" data-filter=".category-illustration" class="current">Illustration
< a class="button" href="#" data-filter=".category-branding" class="current">Branding
< a class="button" href="#" data-filter=".category-web" class="current">Web Design
< /div>
And this later down to append the selection to the grid:
$(‘#filter-category a’).click(function(){
var $selector = $(this).attr(‘data-filter’);
$container.isotope({ filter: $selector });
return false;
});
This works, but since all it’s basically doing is showing/hiding what’s already on the page, it pays no attention to the pagination (a “load more” button using Infinite Scroll). For example, if I click on the “branding” category and there isn’t anything from that category on the first page, nothing shows up until “load more” is clicked. So I need to be able to filter ALL the posts, no matter what page they’re on. I’m thinking I’ll have to do this with some sort of AJAX.
Ideas?
