JQuery Isotope container height issue w/ iDangero.us Swiper

Question

EDIT: The script is triggered and performing correctly when the window is being resized. Thanks a lot Сър Георги Демирев!

---

I've been pondering over a problem for a long while and I just can't seem to get a grip on it. On a photography portfolio site I use iDangero.us Swiper for a slideshow and JQuery Isotope for a thumbnail gallery.

Now, it works fine on Firefox and Chrome on Linux and Windows 7 alike.

However, on IE, Safari and Opera the grid items are showing in a vertical line, rather than a grid.

In order to locate the error I stripped the code from everything until I found out that Isotope stops this behaviour when I remove the Swiper part of the code.

The parent divs show to have 0 px height. Changing these to a fixed height (e.g. 1000px or 100%) doesn't change anything.

• Here's the original site: http://anthron.octans.uberspace.de/meta.php

• Here's a minimal example that still produces the error:

• http://anthron.octans.uberspace.de/meta.debug.php

• And the minimal source code: http://pastebin.com/H6t9bbNC

EDIT: Here's an implementation of Сър Георги Демирев's suggestion:

• http://anthron.octans.uberspace.de/meta.debug.2.php

It works now, however the margin-right after the grid items are gone and return only after window resize. However one step further now.

I'm very grateful for any suggestion, I'm quite clueless about this one...

Answer 1

I had a similar problem recently and the fact that images are stacked one under another probably means that the script is not loading. However, if you resize the browser window a little bit, the script is triggered and images are places the way they should.

Wrap this code

imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

in (document).ready function like this:

$(document).ready(function () {

    imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

});