JQuery / Flickr API issue with get Photo set

Question

I have been trying to put together a photo albumn system that is managed via Flickr, I have been spending the past day or so playing around with the Flickr API and have the following code, but it just doesn't return the expected HTML. insetad I get an error in my browser for the line above ($('#images').html(theHtml);)

  <script type="text/javascript">
     $(document).ready(function(){

   $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxx&photoset_id=xxxxxxxxxxxxxxxxxxxx=&format=json&jsoncallback=?', displayImages);

   function displayImages(data) {

    var photosetID = "";
    var title = "";
    var theHtml = "";
    $.each(data.photosets.photoset, function(i,set){

     photosetID = set.id;
     title = set.title._content;
     ids.push(photosetID);
     titles.push(title);

     var sourceSquare = (set.media.m).replace("_m.jp g", "_s.jp g");

     theHtml+= '<li><a href="'+set.link+'" target="_blank">';
     theHtml+= '<img title="'+set.title+'" src="'+sourceSquare+'" alt="'+set.title+'" />';
     theHtml+= '</a></li>';
    });

    $('#images').html(theHtml);    });   });

  </script>

Also I have seen examples using something like this:

$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lang=en-us&format=json&jsoncallback=?", displayImages);

BUt was not sure what exactly a group id is, is that the same as the set ID? How does Flickr know who I am in example two as I don't see any API being passed.

My preference would be to get the first example working as that is what I have been working on, but any advice/example would be apprieciated

cheers

Answer 1

It's because you're trying to use the api feed as if it were an rss feed. they are two different formats. Take a look at the flickr api browser for photosets.getPhotos

This code should get you going:

$.getJSON(url, function(data) {
    $.each(data.photoset.photo, function(i,item){
    var squareUrl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
    var largeUrl = squareUrl.replace('_s.jpg', '_b.jpg');
});

Answer 2

Try this code its working and please change the credentials after your testing is complete...