在显示图片库图像时需要帮助解决Flickr/JSON/Javascript问题

Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.

想知道是否有人能帮助我。我试图通过从Flickr相册中抓取图片来建立一个每周一次的图片竞赛页面，但是我不能显示图片。对于组来说，它是可行的，但是对于gallery代码有一些问题。获得正确的JSON响应，但是不能像组映像那样在页面上显示结果。

Here's my Javascript:

这是我的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);
    });
}

Any help would be fantastic :)

任何帮助都是非常好的。

Regards, David

问候,大卫

1 个解决方案

#1

Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.

在一位朋友的帮助下，他想出了这个办法。我在extras参数和item中丢失了date_upload值。添加的数据需要更改为item.upload。