jQuery Isotope masonry layout animation failing :(

3 Views

I am trying to get jQuery Isotope’s masonry layout to work on this test site: http://make.truliablog.com/test-filters

It appears to be sorting them properly, but the animation when you resize the window and the blocks adjust are not working. How can I fix this problem?

Read More

Here is the associated jQuery code. 

<script>
    jQuery(document).ready(function(){
        jQuery('#container').isotope({
            masonry : {
                columnWidth : 50
            }
        });

        // Filter buttons
        jQuery('#filters a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#container').isotope({ filter: selector });
            return false;
        });
    });
</script>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. It seems Isotope has the default ‘animationEngine’ as ‘css’.
    The shortest way would be to set ‘animationEngine’ as ‘jquery’ (assuming you are using jQuery).

    jQuery('#filters a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuery('#container').isotope({
        filter: selector,
        animationEngine : "jquery"
    });
    return false;
});