Grow your CSS skills. Land your dream job.

Mutliple imagesLoaded functions css call issue

  • # March 18, 2013 at 6:24 pm

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".