treehouse : what would you like to learn today?
Web Design Web Development iOS Development

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.