Home › Forums › JavaScript › Mutliple imagesLoaded functions css call issue
- This topic is empty.
-
AuthorPosts
-
March 18, 2013 at 6:24 pm #43481revolutiongParticipant
My preloader doesnt show when I have two function using Imagesloaded. Works fine when I disable imagesloaded on one. Need to have ablity to use three or four depending.
My preloader div and SCSS.
CSS:
.masonry-loading {padding:10% 0 10% 50%;}
img {border:0 !important;}Here is my function for different columns.
// Masonary
$(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;
}
});
});
});// Masonary
$(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;
}
});
});
});Below I placed the CSS to remove loader, for some reason this does not work when I load it in the function above after imagesLoaded. Perhaps if I could get that work, it would solve the problem.
function triggerCallback() {
callback.call($this, $images),
$(“div.masonry-loading”).css({‘display’: ‘none’});
}Tried a bunch of stuff, I bet it something simple. Anyway help would be greatly appreciated.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.