Template.home.rendered = function() {
var self = this;
var $container = $('.gallery');
$container.imagesLoaded({background: true})
.always( function( instance ) {
console.log('all images loaded');
})
.done( function( instance ) {
console.log('all images successfully loaded');
$container.isotope({
itemSelector: '.image',
layoutMode: 'masonry'
});
$container.isotope('layout');
})
.fail( function() {
console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
};
My Isotope (https://atmospherejs.com/isotope/isotope) ends up getting a height: 0px, so it seems like it’s being initialized too early. I thought that was the whole point of imagesLoaded (https://atmospherejs.com/iamkevingreen/imagesloaded). It works locally but not on deploy where things are slower, so that’s just my hunch, and I don’t know how to resolve it. Haven’t been able to find any good resources for getting Isotope/Masonry to work with Meteor that weren’t outdated, so has anyone been able to get it working recently?
Also welcome to alternatives other than Isotope/Masonry. Was looking at Cast.js but haven’t tried yet.