顯示圖庫圖片時需要Flickr/JSON/Javascript問題幫助

Question

想知道是否有人可以幫助我。我試圖通過從Flickr圖庫中提取照片來製作一個每週圖片比賽頁面，但是我無法顯示圖片。它適用於團體，但在圖庫代碼中存在一些問題。獲取正確的JSON響應，但無法將結果顯示在頁面上，就像組圖像一樣好。

這裏是我的javascript：

$(function() { 

    var map; 
    var markers = []; 
    var infowindow; 

    // Get gallery photos 
    var visibleGallery; 

    $.getJSON("http://api.flickr.com/services/rest/" + 
"?method=flickr.galleries.getPhotos" + 
"&api_key=XXXX" + 
"&photoset_id=XXXX" + 
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" + 
"&format=json&jsoncallback=?", function(data, textStatus) { 

      var htmlString = '<div id="weekContainer">'; 

      var weeks = sortIntoWeekArrays(data.photos.photo); 

      $.each(weeks, function(i, week) 
      { 
        var weekNumber = i + 1; 
        var numberOfWeeks = weeks.length - 1; 

        htmlString += '<div id="week' + weekNumber + '">'; 
        htmlString += '<ul class="weeks">'; 
        if(i < numberOfWeeks) 
        { 
          htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>'; 
        } 

        var sunday = new Date(week.monday.toUTCString()); 
        sunday.setDate(week.monday.getDate() + 6); 
        htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' &mdash; ' + sunday.format("ddd d mmm") + '</li>'; 
        if(i > 0) 
        { 
          htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>'; 
        } 
    htmlString += '</ul>'; 

        if(week.winner !== undefined) 
        { 
          htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>'; 
          htmlString += '<ul class="imagesWinners">'; 
          htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">'; 
          htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />'; 
          htmlString += '</a></li>'; 
          htmlString += '<li class="name"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">' + week.winner.title + '</a></li>'; 
          htmlString += '<li class="owner">' + 'by <a href="http://www.flickr.com/photos/' + week.winner.owner + '" target="_blank">' + week.winner.ownername + '</a></li>'; 
          htmlString += '</ul>'; 
        } 

        htmlString += '<p class="galleryTitle">Our other favourites this week</p>'; 
        htmlString += '<ul class="imagesRunnersUp">'; 

        $.each(week.images, function(i, item) 
        { 
          htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">'; 
          htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />'; 
          htmlString += '</a></li>'; 

          if(item.longitude == "0" && item.latitude == "0") 
          { 
            return true; 
          } 

          var latlng = new google.maps.LatLng(item.latitude, item.longitude); 

          var marker = new google.maps.Marker(
          { 
            position: latlng, 
            map: map, 
            title:item.title 
          }); 
          marker.content = '<a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank"><img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" /></a>'; 
          markers.push(marker); 

        }); 
        htmlString += '</ul>'; 
        htmlString += '</div>'; 
      }); 

      htmlString += '</div>'; 
      $('div#weekViewer').append(htmlString); 

      $('div#weekContainer > div').css('float', 'left').css('margin-right', '30px'); 

      $('div#weekContainer').width(weeks.length * 450); 

      $('div#weekContainer .weekLinksPrev') 
        .click(function(){ 
          $('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow'); 
          return false; 
        }); 
      $('div#weekContainer .weekLinksNext') 
        .click(function(){ 
          $('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow'); 
          return false; 
        }); 

    }); 


}); 

function sortIntoWeekArrays(items) 
{ 
    var weeks = []; 

    // Returns single dimension array containing single dimension arrays 
    $(items).each(function(i, item) 
    { 
      var monday = new Date(item.dateadded * 1000); 
      monday.setDate(monday.getDate() - monday.getDay() + 1); 
      monday.setHours(0,0,0,0); 

      var week, thisWeek; 
      for (i in weeks) 
      { 
        week = weeks[i]; 
        if(week.monday - monday == 0) 
        { 
          thisWeek = week; 
          break; 
        } 
      } 
      if(thisWeek === undefined) 
      { 
        thisWeek = 
        { 
          monday: monday, 
          images: [] 
        }; 
        weeks.push(thisWeek); 
      } 

      if($.inArray('winner', item.tags.split(" ")) > -1) 
      { 
        thisWeek.winner = item; 
      } 
      else 
      { 
        thisWeek.images.push(item); 
      } 
    }); 
    return weeks.sort(function(first, second) 
    { 
      return (first.monday > second.monday) - (first.monday < second.monday); 
    }); 
} 

任何幫助將是非常美妙的:)

問候， 大衛

Answer 1

工作了從朋友一些幫助後。我缺少extras參數中的date_upload值，item.dateadded需要更改爲item.upload。