How to use jQuery with a JSON Flickr feed to display photos
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.
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": "<p><a href=\"http://www.flickr.com/people/33112458@N08/\"> Talk On Travel<\/a> has added a photo to the pool:<\/p> <p><a href=\"http:// www.flickr.com/photos/33112458@N08/3081564649/\" title=\"View from the hotel\"> <img src=\"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 += '<li><a href="' + item.link + '" target="_blank">'; htmlString += '<img title="' + item.title + '" src="' + sourceSquare; htmlString += '" alt="'; htmlString += item.title + '" />'; htmlString += '</a></li> '; }); // 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.
Good luck!
I think you are truly talented Mr Shepherd!
Thanks – very useful and cool!
thanks for the code.
i am trying to put a class=”zoom” (it’s like rel=”lightbox”) on the link, but still it opens in a new window and the class doesn’t work.
(even if i removed the target=”_blank”)
what do i do wrong?
I’m having a bit of trouble getting this working on my site. I have no experience with scripting so I can’t troubleshoot it myself.
These are my own ideas as to why it’s not:
My api key seems slightly different to yours other than the fact that min is from photos_public.
Could this be the problem
http://api.flickr.com/services/feeds/photos_public.gne?id=31654266@N02&lang=en-us&format=json&jsoncallback=?
I’m putting this on my wordpress page but I’m not using widgets so I can’t use FlickrBox.
Is there a specific place I need to have the script if it is to be in a sidebar or should I keep it in the head section?
With the styling I just pasted in the code from this site. Do I have to set up div’s in my sidebar for this to work.
I’m fairly novice at this so I’m sure half these questions are irrelevant but they were the only things I could think of.
Thanks,
Kilian
Can this be done with a field ‘image’ Google Spreadsheet as well? I’ve tried, but I couldn’t get it to work. And spreadsheets.google.com does do json. Any ideas?
The problem is that “&” is being replaced by “&” in the code upon copying. Do a find and replace all and it should work. It did for me.
sorry, the code is rewriting & to the html equivalent to amersand
This is a good script – but how do I limit the number of images it pull in. I only want to display 5.
Thanks
I was able to limit the number of images by adding:
if (i == 8) return false;
before the end of the $.each function. So, in this case, just after
htmlString += ‘‘;
It seems the count starts with 0, because i == 8 will produce 9 pictures.
Thanks for introducing me to jQuery, using JSON and the Flickr API. I’m off, becoming a real web developer now..! =)
Frederik, Amsterdam
hi, i would like display photos from a especific groups, its possible?
Nice script!
It works if I copy your sourcecode prom the example. It’s showing your pictures perfectly.
Though, when I put in my own API string it doesn’t work anymore. I used the rss-string from my phototream and replaced ‘rss_200′ with ‘json’.
Now it just displays an empty square in my site.
Besides that I’d like to ‘unrandomize’ the list and put the latest picture on top.
Can you or someone help me with this?
Thanks a lot!
- Rick
Nice article! I’m always looking into new ways to integrate a Flickr gallery into a website.
I just wrote an article on integrating a Flickr gallery using JSON and jQuery, feel free to check it out for additional ideas: http://bit.ly/7OEpIN
Hi,
Good post, however your link (http://www.richardshepherd.com/flickr.html) doesn’t seem to have any content.
Sorry Simon – all fixed now. I’ve missed copying a few files whilst I’ve been changing hosts!
Hi, good day. Wonderful post. You have gained a new subscriber. Pleasee continue this great work and I look forward to more of your great blog posts.
Hi, like your code and it’s working just fine.
But can anyone tell me how to get more than 20 items in the feed? I have already figured out that it should be possible using a custom request with a flickr api-key.
Would be very thankful for any hint or example.
Richard,
I was looking for a way to pull the little 75px x 75px thumbnails from Flickr, and this did the trick! Thanks so much :-)