lazyload with isotope

by dirkk0

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js"></script>
  <div id="container" class="isotope photos clearfix">
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img width="300" height="300" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a></div>
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013039885/" title="Officer by Dave DeSandro, on Flickr"><img width="200" height="400" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" /></a></div>
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013039583/"    title="Tony by Dave DeSandro, on Flickr"><img width="500" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" /></a></div>
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013646070/"  title="Kendra by Dave DeSandro, on Flickr"><img width="100" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" /></a></div>
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013039541/" title="Giraffe by Dave DeSandro, on Flickr"><img width="400" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" /></a></div>
<div class="photo"><a href="http://www.flickr.com/photos/nemoorange/5013039741/"   title="Gavin by Dave DeSandro, on Flickr"><img width="500" height="500"...

CSS

.isotope{
    background:red;
}

JavaScript

$(function(){

    var $container = $('#container');

    $container.isotope({
        itemSelector : '.photo',
        containerClass: 'isotope'
    });

    $("img").lazyload({
        event : 'scroll',
        effect : 'fadeIn',
        appear: function(){
            console.log('loaded image');
        }
    });

});