Develop Reference

Isotope imagesLoaded Not Working With Filters

I want to use isotope.js with Filters and FitRow Layout. But when I try this code, all images are overlapping.
var $container=$(".portfolio-content");
$container.isotope({itemSelector:".portfolio-items",layoutMode:"fitRows"});
$("#filters").on("click","a",function(){var a=$(this).attr("data-filter");
$container.isotope({filter:a})});
$(".button-group").each(function(b,a){var c=$(a);c.on("click","a",function(){c.find(".is-checked").removeClass("is-checked");
$(this).addClass("is-checked")})});
When I try to use ImagesLoaded plugin, filters are broke and not working. Here is code with imageloaded:
var $container = $('.portfolio-content');
$container.imagesLoaded(function(){
$container.isotope({itemSelector :".portfolio-items",layoutMode : 'fitRows'});
});
$("#filters").on("click","a",function(){var a=$(this).attr("data-filter");
$container.isotope({filter:a})});
$(".button-group").each(function(b,a){var c=$(a);c.on("click","a",function(){c.find(".is-checked").removeClass("is-checked");
$(this).addClass("is-checked")})});
Anybody have an idea? I just want to use isotope.js with filters working properly.

isotope container - show on click

I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.
I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.
You can see my code here - http://chrsdev.com/test.html
How can I fix the issue of all items positioning on top of each other on the initial content load?
Would greatly appreciate it if someone can point me in the right direction.

Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)
Then call isotope like this:
//Initialize isotope on each container
jQuery.each($container, function (j) {
this.imagesLoaded( function() {
this.isotope({
itemSelector : '.element-item'
});
});
});
ADDENDUM
The issue is with your each function and "this". Try this instead.
//Initialize isotope on each container
jQuery.each($container, function (j) {
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.element-item'
});
});
});

Using layoutcomplete with Isotope

I am using Isotope to place some grid elements which is working fine. Now I need to run some code on layoutcomplete so I have added the event and end up with the following code.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
...
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
});
This all works fine except that layoutcomplete is not executed on page load which is of course beacuse the event is added after init. I have then tried setting isInitLayout: false but is then having problem what to do next - I would expect that I could use .arrange() but with no luck.
Anybody who can figure out how I get layoutComplete to execute on page load?

I was pulling my hair off too because of isotope for a long time. But as much as I experienced the 2.0.1 version of it finally we got a stable plugin.
You can use the code below to layout/relayout your isotope:
$container.isotope('layout');
I recommend you to use isInitLayout: false.
Also keep in mind this, if your containers size changes and your isotope is responsive then your layoutComplete gets fired everytime when it happens. So, you may need to use once instead of on.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
isInitLayout: false
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
$container.isotope('layout');
});
Cheers.

Allow Meteor.js to Wait for Images to Load before calling Plugin

When using the Isotope plugin in Meteor, Isotope always apply a style of height: 0 to the Isotope div .grid-container. This can be due to the plugin initializing before the images have loaded. Running $('.grid-container').isotope() in the console manually causes Isotope to make the div visible.
Question: How can we trigger the plugin initialization only after all the images in div .item have loaded? Calling Isotope's imagesLoaded method from within Template.name.rendered does not seem to work.
main.js
Template.main.rendered = function () {
$('.grid-container').imagesLoaded(function() {
$('.grid-container').isotope({
itemSelector: '.item',
layoutMode: 'masonry',
masonry: {
columnWidth: 200
}
})
})
};
main.html
<template name="main">
<div class="grid-container">
{{#each items}}
{{> item}}
{{/each}}
</div>
</template>

As requested in the comment above...
Here's how to use an intermediate DOM element for isotope image loading before doing a final append and layout.
This example is for Backbone but should work fine in Meteor. The crucial aspect in both cases is initializing isotope() on an empty element. For example: <div class="isotope"></div>
As you can see below, I have a grid_view in Backbone that handles all of this and renders items one at a time as they are added to the collection. Naturally, in Meteor that's not the approach to take.
For the record, I'm not sure if the Meteor example would work out of the box but it's not far off. I haven't used isotope in Meteor as I mentioned. The Backbone example is solid and works in production for us.
Here are the examples...
Meteor Example:
// In Meteor, you want your collection and the DOM element
Template.main.rendered = function() {
// Pretty sure this.$ selector works in Meteor rendered
this.$container = this.$('.isotope').isotope({
itemSelector: '.gridItem',
masonry: {
columnWidth: '.gridSizer',
gutter: '.gutterSizer'
}
});
var items = CollectionName.find().fetch();
var $holder = $('<div></div>')
_.each(items, function(item) {
// However you load external or partial templates in Meteor (not sure)
$holder.append(partialTemplate(item));
}
// Load images
$holder.imagesLoaded(function() {
// Append and layout on isotope
self.$container.append(item).isotope('appended', $holder);
});
}
In Meteor, you could use the added callback in your publish function, to send the models to the client one at a time if you wanted. I haven't dug into pagination with Meteor to know the best way to handle that.
Backbone Example:
// Collection Add event
renderItem: function(model) {
var self = this;
// Run it through template
var item = $(self._template(model.toJSON()));
// Load images
item.imagesLoaded(function() {
// Append and layout on isotope
self.$container.append(item).isotope('appended', item);
});
}
// Standard view render function
render: function() {
this.$container = this.$el.isotope({
itemSelector: '.gridItem',
masonry: {
columnWidth: '.gridSizer',
gutter: '.gutterSizer'
}
});
}

JQuery Masonry not displaying correctly when loading external page

So I'm having trouble with Masonry not properly displaying images when I load a page with JQuery into the container div. I'm trying to prevent the page from refreshing for each section. The initial loading of the page works fine, but once I load a page into the div it breaks. Here is my code.
$('#container').load("photos.php?directory="+str, function () {
var container = $('#container');
container.imagesLoaded( function() {
container.masonry();
});
});
I'm even trying to reload Masonry after the images fully load in the div(I don't mind not having to do that). Any help would be greatly appreciated!

Fixed the issue. I had to load the options in JQuery instead of HTML.
$('#container').load("photos.php?directory="+str, function () {
var container = $('#container');
container.masonry('reloadItems');
$('#container').masonry({
columnWidth: 156,
itemSelector: '.item'
});
});