Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope jquery - change default display category

I\'m trying to change the the default category displayed when loading isotope from \"All\" to any other category. Here is the code that calls the script:

function runisotope(){
$container = jQuery(\'#ts-display-pf-filterable\');
    $container.isotope({
        itemSelector : \'.item\'
    });

// filter items when filter link is clicked
jQuery(\'#filter li\').click(function(){
jQuery(\'#filter li\').removeClass(\'current\');
    jQuery(this).addClass(\'current\');
        var selector = jQuery(this).find(\'a\').attr(\'data-filter\');
        $container.isotope({ filter: selector });
    return false;
}); 
};
jQuery(window).load(function(){
runisotope();
});

jQuery(window).smartresize(function(){
runisotope();
});

I read that I can add a filter in the initial call but can\'t seem to get it to work correctly. Any help would be greatly appreciated.

User Gravatar

gbyd

Posted Jun 19 2013 19:39 UTC

$10


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 3758 Views

1 Replies


Hello gbyd,

To filter isotope on initialise, just check if there is element in the filter list with current class and apply it to the isotope. You need to add this code in \'runisotope\' function, right after isotope initialisation:

// filter isotope on initalise
if(jQuery(\'#filter li.current\').length){
        var selector = jQuery(\'#filter li.current\').find(\'a\').attr(\'data-filter\');
        $container.isotope({ filter: selector });
}

I\'ve created a fiddle for you: http://jsfiddle.net/BtQDb/1/

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 19 2013 20:35 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions