javascript - 在显示图库图像时需要有关 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

在 friend 的帮助下解决了这个问题。我在 extras 参数中缺少 date_upload 值，并且 item.dateadded 需要更改为 item.upload。