- This topic is empty.
Viewing 1 post (of 1 total)
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Masonry double up imagesLoaded error.
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.