I implanted Isotope jquery plugin successfully but for some reason I get problem showing all the items when the page is loaded first time and it's only on Chrome.

You can see here what is happening .jpg, that elements are on top of each other. but when I press on PSDs and then back to All it shows properly.

I don't have a default height for the container because I want to to be dynamic.

Any idea how I can fix this?

I implanted Isotope jquery plugin successfully but for some reason I get problem showing all the items when the page is loaded first time and it's only on Chrome.

You can see here what is happening http://dl.dropbox.com/u/15358757/sd.jpg, that elements are on top of each other. but when I press on PSDs and then back to All it shows properly.

I don't have a default height for the container because I want to to be dynamic.

Any idea how I can fix this?

• javascript
• jquery
• css
• google-chrome

1 Answer 1

The problem is probably that Isotope is doing its thing before the images are loaded.

http://isotope.metafizzy.co/demos/images.html

[In this demo] Isotope is triggered after all images are loaded with the imagesLoaded plugin.

http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin

var $container = $('#container');

$container.imagesLoaded(function() {
  $container.isotope({
    // options...
  });
});