jquery - Flexslider and Masonry - imagesLoaded issue -
i'm trying include flexslider gallery in masonry jquery layout. however, cannot masonry to recognize correct height of flexslider. know doing wrong imagesloaded script.
i have imagesloaded linked , have tried every combination of loading order.
how flexslider , masonry work together? in advance!
right now, have following script loaded in document ready function:
var $container = $('#masonry'); $container.imagesloaded( function() { $container.masonry({ itemselector: '.item', gutter: 25 }); }); $('.multislide').flexslider( { slideshow : true, animation : 'slide', pauseonhover: true, animationspeed : 400, smoothheight : true, directionnav: true, controlnav: false, prevtext : '<span class="fa fa-caret-left"></span>', nexttext : '<span class="fa fa-caret-right"></span>' });
this isn't pretty fix, worked around same issue using settimeout() flexslider fires first:
var $container = $('#masonry'); function loadmasonry(){ $container.imagesloaded( function() { $container.masonry({ itemselector: '.item', gutter: 25 }); }); } settimeout(loadmasonry, 500); $('.multislide').flexslider( { slideshow : true, animation : 'slide', pauseonhover: true, animationspeed : 400, smoothheight : true, directionnav: true, controlnav: false, prevtext : '<span class="fa fa-caret-left"></span>', nexttext : '<span class="fa fa-caret-right"></span>' });
i know there must nicer way this, seems trick until figure out better thing might :p
Comments
Post a Comment