isotope with lazy

problem, lazy not responding

by FirstBug

HTML

<script src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="container" class="container">
    <!-- First item to be sure isotope works correctly-->
    <div class="box">
        <img src="http://images1.wookmark.com/266985_tumblr_mj8oltkccc1qjd5wfo1_500.png" width="200" height="300">
    </div>
        
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin: 10px;
}
.box {
    padding : 3px;
}

JavaScript

// For Ajax testing
var json = [{
    "width": "200",
    "height": "300",
    "image": "http://images2.wookmark.com/266707_tumblr_moaebdyiek1sqmj1zo1_500.jpg"
}, {
    "width": "200",
    "height": "200",
    "image": "http://images2.wookmark.com/267766_tumblr_mocaf2myso1r46py4o1_1280.jpg"
}, {
    "width": "200",
    "height": "300",
    "image": "http://images2.wookmark.com/266821_tumblr_mn3a90g2pu1rbaqo5o1_500.jpg"
}, {
    "width": "200",
    "height": "300",
    "image": "http://images3.wookmark.com/266762_tumblr_mnu25rktj61ro1zebo1_500.jpg"
}];

var APIURL = "http://www.wookmark.com/api/json?type=search&term=small";
var small_img = "http://www.appelsiini.net/projects/lazyload/img/grey.gif";
 

$(document).ready(function () {
    //
    // initialize at ready ;
    //
    $('#container').isotope({
        itemSelector: '.box',
        columnWidth: function (containerWidth) {
            return containerWidth / 12;
        },
        onLayout: function () {
            $(window).trigger("scroll");
        }
    });
    //
    // here i will be using data through api
    // For now I am using i am defining json manually
    // var json is defined at top of this code 
    // considering json return was success
    //$.getJSON(APIURL, function (json) {
    var newElements = "";
    $.each(json, function (key, value) {
 
        newElements +=
            '<div class="box">' +
            '<img class="lazy" src="' + small_img + '" data-original="' + value['image'] + '" width="' + value['width'] + '" height="' + value['height'] + '" style="width:'+value['width']+'px; height:'+value['height']+'px"/>' +
            '</div>';
    });

    var $newElems = $(newElements);

    $('#container').append($newElems).imagesLoaded(function () {

        $('#container').isotope('appended', $newElems);

        $("img.lazy").lazyload({ 
            effect : "fadeIn",
            skip_invisible : false
        });


    });
    //});
});