Isotope and flexible images

[culbrique]

Hi !

I'm using Isotope to display a lot of images and Unveil to load them correctly. But my layout is build with three different items dimensions. With just Isotope, it's working, but I can't get Unveil work on it. I have followed this topic : https://github.com/luis-almeida/unveil/issues/85 but there is a weird technique with padding-bottom to size them.

I have built a Jsfiddle to show you my problem : http://fiddle.jshell.net/njnf86L6/8/ As you can see, on page load, everything is ok, but when you scroll, the images are overlaped. I really don't know what to do.

Every help will be appreciated. Thanks in advance.

[culbrique]

I found a weird solution to my problem. This was my original script

$(document).ready(function () {
   var $container = $('#masonry').imagesLoaded( function() {
    $container.isotope({
        itemSelector: 'ul li'
    });
   });
    $("img").unveil(50, function() {
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });
});

And I just moved the isotope imagesLoaded function into the unveil function like that

$(document).ready(function () {   
    $("img").unveil(50, function() {
      var $container = $('#masonry').imagesLoaded( function() {
        $container.isotope({
          itemSelector: 'ul li'
        });
     });
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });
});

And it works perfectly ! I just added "transitionDuration: 0" to isotope function to make sure anything move during unveil is reaveling images. I hope this solution is strong enough but I don't see any mistake.

The updated jsfiddle here http://fiddle.jshell.net/njnf86L6/10/

Unveil is really awesome, this plugin helped me many times.