Isotope Overlapping Images?

Question

It seems like it only happens in Chrome and Safari.. not Firefox. I\'m using it with the foundation responsive framework so I\'m not sure what to do about setting the height.

Answer 1

You should make sure you preload all imagess before you call isotope method, here is real world demo for this: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm , you preload images with jquery.imagesloaded.min.js plugin, then call isotope , content won't get overlapped.

Answer 2

Update (original answer was wrong because the browser used cached images..)

The issue seems to be that the images are not loaded and the calculations fail.

If you wrap the isotop code in $(window).load(function(){ ..... }); it seems to work as expected..

See http://jsfiddle.net/TLjay/2/

---

Not sure why it happens, but a simple workaround is (since it gets fixed once you resize the window) to manually call a resize.

so just adding $(window).resize(); at the end of your code fixes it..

Demo at http://jsfiddle.net/TLjay/1/

Answer 3

imagesLoaded works by checking the images currently in the containing element. So in your case, it's not actually do anything in $(window).load() since there are no items in that element. Instead, I would recommend triggering imagesLoaded again, after items have been inserted with the $.ajax.success

success: function(data){
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms )
    $container.isotope('insert', $(data) )
      // trigger isotope again after images have been loaded
      .imagesLoaded( function() {
        $container.isotope('reLayout');
      });
    }
});

Answer 4

In case you have the dimensions of the images available you could do a workaround with SVG placeholders.

For example: Use a figure element and position the img with "position: absolute" on top of the svg.

This way isotope renders the gridelement with the SVG that occupies the space and puts the img on top it.

<figure>
<svg xmlns="http://www.w3.org/2000/svg"
  width="[inputKnownImageWidth]"
  height="[inputKnownImageHeight]"
></svg>
<img src="" alt="">
</figure>