Callback for jquery plugin Isotope

Question

I\'m using isotope ( http://isotope.metafizzy.co ) with expandable items, and i would like to use ScrollTo so that i can automatically scroll to the newly expanded item..

Answer 1

I recently tried to implement your idea with the animationOptions/complete-function but didn't get it to work properly. that's when I came up with this one, getting the animation done by directly appending these jquery commands to the isotope call..

first load isotope for the layout/masonry display:

container.isotope({
    itemSelector: '.selector',
    masonry: {
        columnWidth: smallWidth,
    }
}); 

..and then in a second call include the reLayout/resizing inside a click function:

$('.selector').click(function(){
var $this = $(this),
    tileStyle = $this.hasClass('large') ? { width: smallWidth } : { width: largeWidth };
$this.toggleClass('large');     
$this.find('.selector').stop().animate( tileStyle );   

    // Here we search for the enlarged isotope-selector and apply the scroll
    // function to it...the item position is available to jquery at this point.
$container.isotope( 'reLayout' ).find($this).each(function() {
    var target = $(this);
    if (target.hasClass('large'))
                $.scrollTo(target, 800,{offset:-50});
    });
});

... I know the code isn't perfect and the auto scrolling is only working on the first clicked item, but not anymore when there's already one or more enlarged items. maybe somebody has an idea on how to extend this.