Change width of items when there is less than 3 after filtering with Isotope

Question

I have this example: http://jsfiddle.net/desandro/DJVX2/2/ that does something close to what I need.

I have a lot of items and I have a filter. When all are shown, the items are in several columns. But when I filter some times I'll get only one or two items as a result and the client wants them to be "full width", so my items need to change width after filtering when there is less than three.

This is what I have so far:

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

  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    }
  })

$container.isotope( 'once', 'layoutComplete',
        function( isoInstance, laidOutItems ) {
            if(laidOutItems.length<=2){

                $( ".item:not([style$='display: none;'])" ).each(function( index ) {
                    var $this = $(this);

                    if(!$this.hasClass('big')){
                        tileStyle = { width: 1048, height: 290};
                        $this.toggleClass('big');

                        $this.find('.item-content').stop().animate( tileStyle );
                    }
                    $(this).trigger('click');
                });
                $container.isotope( 'layout' );
            }
        }
    );
});

It does work fine on my project if I click manually on both items using the script from the fiddle, but if I try to implement it inside the layoutComplete event they will resize but they won't position properly, even when the $container.isotope( 'layout' ); line is there.

Of course, when I click the filters I need the items to go back to their previous size but since I'm having trouble with the first part of the problem, let's find out that beforehand.

Here is a fiddle with my issue: http://jsfiddle.net/DJVX2/1305/

Answer 1

You are actually toggling two times your big class in your click event. Remove one :

$('.item').click(function(){
    var $this = $(this),
        tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
    //$this.toggleClass('big');

    $this.find('.item-content').stop().animate( tileStyle );

    $this.toggleClass('big');

    $this.find('.zoom').stop().animate( tileStyle );

    $container.isotope( 'layout' );

});

Then, I don't think you really need your layoutComplete event. You can just put the code when you are filtering something :

$('#filters').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });

    // Make all items small
    $('.item').removeClass('big');
    $('.item .item-content').stop().animate({ width: 50, height: 50});

    // If filtered items are less than 3, make them wide
    if ($(filterValue).length <= 2) {
        $( ".item:not([style$='display: none;'])" ).each(function( index ) {
            $(this).trigger('click');
        });
    }

    $container.isotope( 'layout' );
});

JsFiddle demo