Isotope jquery plugin doesn't show properly on chrome

Question

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?

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...
  });
});