How to use jQuery with a JSON Flickr feed to display photos

richardshepherd — Mon, 02 Feb 2009 22:43:29 +0000

So today I needed to display photos from our Flickr Group without using php or asp.net. I have a WordPress widget that does this job nicely, but no PHP was allowed.

Thank goodness for jQuery! jQuery has a handy little function which allows us to load JSON data using an HTTP GET request, and then process the contents as an array. And with some natty CSS to square things up as a grid, I have nine random (ish) photos from our Flickr group displaying in a nice 3×3 grid.

See it in action.

The full commented code is at the bottom of this post, but let’s go through it bit by bit.

What is JSON?

Since we’re talking about Flickr, let’s use they’re definition:

“JSON, or JavaScript Object Notation, is a simple machine-readable data-interchange format, which makes constructing API applications in JavaScript easy (though it can be used from other languages too!). “

Which means what exactly? Well, it’s a lot like any other feed or data – like an RSS feed, for example. A typical Flick JSON response might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

({
"title": "Talk On Travel Pool",
"link": "http://www.flickr.com/groups/talkontravel/pool/",
"description": "Travel and vacation photos from around the world, featured on the Talk On Travel blog. Join us in sharing your favourite destinations, your top hot spots, and the places to avoid. ",
"modified": "2009-02-02T11:10:27Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "View from the hotel",
"link": "http://www.flickr.com/photos/33112458@N08/3081564649/in/pool-998875@N22",
"media": {"m":"http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg"},
"date_taken": "2008-12-04T04:43:03-08:00",
"description": "

\"http://www.flickr.com/people/33112458@N08/\"> Talk On Travel<\/a> has added a photo to the pool:<\/p>

\"http:// www.flickr.com/photos/33112458@N08/3081564649/\" title=\"View from the hotel\"> \"http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg\" width=\"240\" height=\"180\" alt=\"View from the hotel\" /><\/a><\/p> ",
"published": "2008-12-04T12:43:03Z",
"author": "nobody@flickr.com (Talk On Travel)",
"author_id": "33112458@N08",
"tags": "spain dolphins tenerife canaries lagomera aqualand playadelasamericas junglepark losgigantos loscristines talkontravel"
}
]
})

Which is not altogether too hard to digest. To see the whole feed from Talk On Travel have a look here.

All we need to do is get that feed in a way our javascript can use, and then use it. Enter, stage left, jQuery…

Create our object and fill it with data

So how can jQuery help us out? With the handy $.getJSON(url, [data], [callback]) command.

It’s simpliest method would be something like:

1	$.getJSON("http://www.example.com/yourjsonfeed.json", functionName);

Which would grab the info from a json feed at www.example.com/yourjsonfeed.json and then execute a function called functionName.

Then, you’d have to create a function like so:

1 2	function functionName(data) { }

In which data is automatically populated with the json feed. Nice, eh?

So now we have our data object, we need to know how to grab stuff out of it. Again, this is pretty easy stuff. We use some dot syntax like:

1	data.item.media.m

Which says… in data, go to (the first) item, then go to the media bit and grab the m bit.

Scroll back to the top of this page, and in our example you’ll see that this would be ‘http://farm4.static.flickr.com/3037/3081564649_4a6569750c_m.jpg’.

You can probably work out then what item.title and item.link would give us. Armed with that, you can get any information you need from this feed. All we have to do now is display it!

Getting this feed onto the screen

Does that make sense so far? Hope so. If you get lost, check out the excellent jQuery documentation – the links for which are at the bottom of this post.

Let’s sew it all together in a really simple function that just cycles through all the images in the feed. By default, Flickr returns 20 images.

As I’ve commented the code, you should be able to work it out from here…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Our very special jQuery JSON fucntion call to Flickr, gets details
// of the most recent 20 images

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

function displayImages(data) {

// Start putting together the HTML string
var htmlString = "";

// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){

// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

// Here's where we piece together the HTML
htmlString += '

+ item.link + '" target="_blank">';
htmlString += ' + item.title + '" src="' + sourceSquare;
htmlString += '" alt="'; htmlString += item.title + '" />';
htmlString += '

';

});

// Pop our HTML in the #images DIV
$('#images').html(htmlString);

// Close down the JSON function call
}

But those aren’t my photos!?

I know, I know. Have a look at that feed address once more…

http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?

Spot the 998875@N22 bit? Well that’s the Flickr user ID for Talk On Travel, another blog that I look after. You need to put your own ID in that string.

I recommend using http://idgettr.com/ to find out easily!

Over to you

That’s a simple introduction to JSON and Flickr, and I hope it puts you on the right path.

For more details on JSON and jQuery, and with another example of how to get photos from a Flickr JSON feed, check out http://docs.jquery.com/Ajax/jQuery.getJSON.

To read up on the Flickr JSON object, head over to http://www.flickr.com/services/api/response.json.html.

You can see my code in action at http://www.richardshepherd.com/flickr.html. Check out the source code to see what it’s doing.

Obviously, you can do a lot more with this, but it’s just a basic implementation to get you started.