Question

I’ve managed to get multiple filters working using the jQuery Masonry plugin, the only problem is once you’ve used one filter you can’t use another filter until you reload (bear with me I’m still quite new to this). Here’s my code:

jQuery('#menu1').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

jQuery('#menu2').click(function() {
      var menu = $(this).attr('menuref');
      jQuery('.pics').removeClass('pics').addClass('.hidden').hide().filter("[imageref='" + menu + "']").removeClass('.hidden').addClass('pics').show();
      jQuery('#projectimages').masonry('reload');
});

So there’s my 2 filters, here’s a template I’ve uploaded onto my server to to demostrate what I mean: http://nealfletcher.co.uk/testing-testing/
Clicking on ‘Filter 1’ will successfully filter out the relevant content and reload the masonry plugin as specified, BUT if you then click on ‘Filter 2’ it merely hides all the content, and vice versa, if you click ‘Filter 2’ first that will work, then ‘Filter 1’ won’t…until you reload.
Is there any way you can have both the filters working simultaneously?

Answer 1

You would somehow need to implement a re-trigger of Masonry. But this way of filtering is just so much simpler and flexible, because it allows for combination filters also.

$(function() {

var $container = $('#container');

$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: your least common divisor in pixels here
    }
});

$('#filters').on('click', 'a', function() {
    var selector = $(this).data('filter');
    $container.isotope({
        filter: selector
    });
});

});

UPDATE: see this two years old sort of a “hack” by the developer regarding a user who also needed to re-layout after hiding/showing items (blog posts). His solution is to apply masonry only to visible elements.