jQuery masonry with ion.tabs, using masonry with different (tab) containers on same page -

jQuery masonry with ion.tabs, using masonry with different (tab) containers on same page -

here link jsfiddle showing problem: http://jsfiddle.net/robkom/t73qk/23/

$(document).ready(function() { // https://github.com/ionden/ion.tabs $.iontabs("#tabs_group"); // http://masonry.desandro.com/, http://imagesloaded.desandro.com/ var $container1 = $(".iontabs__body").find("[data-name=tab1]"); $container1.imagesloaded(function(){ $container1.masonry({ itemselector: '.item', transitionduration: 0 }) }); var $container2 = $(".iontabs__body").find("[data-name=tab2]"); $container2.imagesloaded(function(){ $container2.masonry({ itemselector: '.item', transitionduration: 0 }) }); var $container3 = $(".iontabs__body").find("[data-name=tab3]"); $container3.imagesloaded(function(){ $container3.masonry({ itemselector: '.item', transitionduration: 0 }) }); });

i using jquery 1.11.0, , jquery plugins masonry , ion.tabs. basically, each tab container has square divs want arranged in masonry fashion.

there 3 tabs , though initialize masonry on each tab separately, seems take impact on first tab. can explain doing wrong? other 2 tabs should first one.

got working: http://jsfiddle.net/robkom/t73qk/35/

i had add together next code:

$('.iontabs__tab').click(function(){ var $container = $(".iontabs__item"); $container.imagesloaded(function(){ $container.masonry({ itemselector: '.box', transitionduration: 0 }); }); });

jquery jquery-masonry