ajax and masonry

[rwchampin]

so ive read all the threads on stack overflow abt ppl with the same issue but i cant seem to get it working. All thats happening is a few images are loaded via ajax on page load and then theres a more button thats clicked and loads more pics via ajax. I create the string of html in photoHTML. then turn it into an object….then append both, which is the suggestion made by everyone on stack overflow. help?

This is the auto-run code to load a few images w ajax on page load

var shotList = [1255447, 974182, 511102, 1284313, 688239, 1257417, 1128475, 998764, 1105391, 1255447, 974182, 511102, 1284313, 688239, 1257417, 1128475, 998764, 1105391, 688768, 1105391]; var inc = 3; var loadCount = 10;

for(var i = 0; i < 10; i++){

        var flickrAPI = "http://api.dribbble.com/shots/"+ shotList[i] +"?callback=?";
        var flickrOptions = {

        };

        function displayPhotos(data){
        var photoHTML = "";
        console.log(data);

            photoHTML += '<div>';
            photoHTML += '<a href="' + data.image_url + '">';
            photoHTML += '<img height="auto" /></a></div>';


        $('#container').append(photoHTML);
        }


        $.getJSON(flickrAPI, flickrOptions, displayPhotos);





}

this is the actual button click that im having the issue with

$(‘#more-ajax’).click(function(){

     var photoHTML = "";

    for(var x = 0; x < inc; x++){

        var flickrAPI = "http://api.dribbble.com/shots/"+ shotList[loadCount] +"?callback=?";

        var flickrOptions = {

        };

        function displayPhotos(data){

        console.log(data);

            photoHTML += '<div>';
            photoHTML += '<a href="' + data.image_url + '">';
            photoHTML += '<img height="auto" /></a></div>';

      var $photoHTML = $(photoHTML);

        $('#container').append($photoHTML);
        $('#container').masonry('appended','$photoHTML');

     }


        $.getJSON(flickrAPI, flickrOptions, displayPhotos); 
        loadCount++;            
    }

});

[Author]

Posts