Sometimes I need 4 columns, others times 3. Well I created a preloader the gets removed through the callback in the masonry.js
function triggerCallback() { callback.call( $this, $images ), $("div.masonry-loading").css({'display': 'none'}); $("div.masonry-c").css({'visibility': 'visible'}); $("div.masonry-four-c").css({'visibility': 'visible'}); }
For some reason, it removes my preloader before the images are loaded when have two different instances of masonry loaded as so.
$(document).ready(function(){ var $container = $('.masonry-c'); var min_width = 230; $('.masonry-c').hide(); $container.imagesLoaded( function(){ $('.masonry-c').fadeIn('fast'); $container.masonry({ itemSelector : '.masonry-box', isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth)/3) | 0) ; if (box_width < min_width) { box_width = (((containerWidth)/2) | 0); } $('.masonry-box').width(box_width); return box_width; } }); }); }); // Masonary1 $(document).ready(function(){ var $container1 = $('.masonry-four-c'); var min_width = 200; $('.masonry-four-c').hide(); $container1.imagesLoaded( function(){ $('.masonry-four-c').fadeIn('fast'); $container1.masonry({ itemSelector : '.masonry-four-box', isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth)/4) | 0) ; if (box_width < min_width) { box_width = (((containerWidth)/3) | 0); } if (box_width < min_width) { box_width = (((containerWidth)/2) | 0); } $('.masonry-four-box').width(box_width); return box_width; } }); }); });
There must be a better way of doing things, thanks.
Sometimes I need 4 columns, others times 3. Well I created a preloader the gets removed through the callback in the masonry.js
For some reason, it removes my preloader before the images are loaded when have two different instances of masonry loaded as so.
There must be a better way of doing things, thanks.