Need help with Flickr/JSON/Javascript issue when displaying gallery images

Question

Hi all,

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.

Here's my 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

Answer 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.