0

I have isotope portfolio set up on my website (which you can view through my profile) and I want to fade in the images of the isotope gallery as they load as shown here: http://cameronspear.com/demos/jquery-image-fade-in-on-load/ (example).

I tried using imagesLoaded like on this question but it didn't work: Isotope display gallery after images loaded

Also here's a jsfiddle with the method mentioned in the comments (not isotope): http://jsfiddle.net/9z2u2xtk/ (doesn't seem to work good if more than 5 images are to load)

$pfcontainer.imagesLoaded(function(){  
$pfcontainer.fadeIn(1000).isotope({
        getSortData : {
            number : function( $elem ) {
            return parseInt( $elem.find('.number').text(), 10 );
          },
      },
    sortBy : 'number',
        filter: '.designs',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
});
Community
  • 1
  • 1
Tasos
  • 1,622
  • 4
  • 28
  • 47
  • Added code on my question. Also here's another example of the effect: http://nicolasbouliane.com/ using jquery as it is described here http://wisercoder.com/fade-images-on-load-with-jquery/ but it didn't work as good on my isotope gallery. – Tasos Dec 13 '14 at 20:56

2 Answers2

1

Here is an example (borrowed from an isotope example) using isotope v2 and imagesloaded (not included in isotope 2 but is in v1)

Codepen

$( function() {
// init isotope   
var $container = $('.isotope').imagesLoaded( function() {
$container.isotope({
itemSelector: '.item',
masonry: {
  columnWidth: 110
}
});
// reveal all items after init
var iso = $container.data('isotope');
$container.isotope( 'reveal', iso.items );
});  
});
Macsupport
  • 5,406
  • 4
  • 29
  • 45
0

Firstly, thanks to Macsupport for helping out. I found an easier solution that looks great (atleast on my project), from this answer: https://stackoverflow.com/a/5559155/1181121

I ended up using css

$("img").css({opacity: 0, visibility: "hidden"});
   $(document).ready(function() {
     $("img").bind("load", function () { $(this).css({opacity: 1, visibility: "visible"})});
});
Community
  • 1
  • 1
Tasos
  • 1,622
  • 4
  • 28
  • 47