Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript ajax and masonry

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #176538
    rwchampin
    Participant

    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 &lt; 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++;            
        }
    
    });
    
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.