Isotope not working with imagesLoaded?

Question

I'm using jQuery Isotope to create a horizontal layout, aligning DIVs with 100% height next to each other and center images inside each DIV vertically. So for, I'm calling Isotope like this and everything works fine in Chrome (locally):

$(function(){
    var $container = $('#container');
    $container.isotope({
        itemSelector : '.itemwrap',
        layoutMode: 'horizontal',
        horizontal: {
            verticalAlignment: 0.5
        }
    });
});

As the images take time to load, they tend to mess up the Isotope layout, so I'm trying to work with the imagesLoaded fix: http://isotope.metafizzy.co/appendix.html

I implemented this fix like this:

$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.itemwrap',
            layoutMode: 'horizontal',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });
});

With this imagesLoaded, the Isotope does not load at all anymore. Removing imagesLoaded, Isotope kicks in again (but with the messed up layouts). Does anyone know, where the mistake lies?

Thanks!

Zipah

You have included the imagesLoaded script: desandro.github.io/imagesloaded – Nosology

Wow, stupid, thanks a lot, that was it. – Zipah

Derp. Thank you for debugging my tired brain. – Carnassial

Answer 1

You can also use this implementation, so instead of waiting for everything to load, you can show the images as they get loaded to the grid individually, the code would look something like this:

jQuery(document).ready(function(){

     // Initialize Isotope

     $('.grid').isotope({
        itemSelector: '.item',
        percentPosition: true,
     });

     // Refresh the layout of the grid each time an image gets loaded

     $('.grid').imagesLoadedMB().progress( function() {
        $('.grid').isotope('layout');
    });

});

I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can specify very easy the space between the items, number of columns on each resolution, and more, also it comes with the ability to add filters, sorting and a search filed, give it a try!

Made

Answer 2

I also came over to the same problem recently and discovered that this is due to async calls. Your $container.imagesLoaded() function is called before the images loaded plugin is loaded.

You just need to wrap $container.imagesLoaded() into $(document).ready() and remove asyn attr from jquery script line.

Eh