Grow your CSS skills. Land your dream job.

Masonry double up imagesLoaded error.

  • # March 14, 2013 at 2:16 pm

    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.

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".