views:

39

answers:

1

I'm currently trying setting up a little site that pulls in sets from flickr using JavaScript and JSON. It is all working fine except that the order of the photos on the site differs from that of the set on Flickr. I've searched this extensively for a solution, but have had no luck. Has anyone had this issue before? and/or know of a solution? My current code is:

function getImages(setID) {
 $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=" + setID + "&nsid=USER_ID&lang=en-us&format=json&jsoncallback=?", displayImages);
} 

function displayImages(data) {
 var htmlString = "";
 $.each(data.items, function(i,item){

   // get large images
   var nextImage = (item.media.m).replace("_m.jpg", "_b.jpg");
   htmlString += '<img title="' + item.title + '" src="' + nextImage;
   htmlString += '" alt="'; htmlString += item.title + '" />';

 });

 $('#images').html(htmlString);
}
+1  A: 

after more looking through the api, I ended up using the rest instead of feeds which brings in the order correctly. Unfortunately you can't access the large images this way, but the info to access them is provided, so it was a matter of creating the img src for each image when looping:

function getImages(setID) {
 $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&amp;api_key=yourAPIkey&amp;photoset_id=" + setID + "&lang=en-us&format=json&jsoncallback=?", displayImages);
} 

function displayImages(data) {
 var htmlString = "";
 $.each(data.photoset.photo, function(i,photo){

   var imgSrc = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_b.jpg';
   htmlString += '<img title="' + photo.title + '" src="' + imgSrc;
   htmlString += '" alt="'; htmlString += photo.title + '" />';

 });

 $('#images').html(htmlString);
}
Aaron Moodie