Use Flickr to Feed Your Photo Gallery


Many clients want simple slideshows on their websites. It is best to avoid Flash based sliders for various reasons (SEO performance is of paramount importance to us). There are many great javascript based ones out there that degrade gracefully and don’t require any 3rd party plugins.We prefer Jquery based ones.

Typically, these javascript sliders load images listed in the html into an array that the slider library operates on. However, it’s usually hard to get away with this unless the owner of the website you are building is okay with modifying the html and uploading images when they want new ones in the rotation.

So, you can build these folks a tool to add new images to the slider or you can attempt what we did and connect to Flickr as a source for the images. This is a great solution for most website owners, because regardless of whether they are technical or not, the usability of Flickr’s software is incredible. Further, Flickr stores the images on Edge server’s which means that they will load more quickly than from your standard web hosting account.

So, there are a few tips and tricks that we will share so that you don’t have to burn a night putting this together.

Here is an example
Here is the source code

Let’s start with the Flickr integration. There is a bunch of code examples on the web, but most of them avoid using the Flickr API and instead try to parse the pictures from an RSS feed. This is a mistake for a couple of reasons. Firstly, you can only grab medium and small size images from the feeds. Second, you cannot control the order in which they are displayed.

As it turns out, calling the API is just as easy from a coding perspective. The one extra little bit of work you have to do is get an API key from the Flickr account you want to pull images from, which is easy:

To get your Flickr API key:
1. Login to Flickr
2. Choose “Your Apps” from the “You” menu
3. Click the button that says “Request API Key”
4. Agree to the terms

You should get an API KEY that looks like a string of random characters. You won’t need the “Secret” that Flickr also gives you.

The next thing you need to do is create an album that contains the pictures you want to use. When you are looking at the main page for the album you create, you will see a link in your browser’s address bar that looks like this:

That number that appears after the word “sets” in the url is the SET ID. You will need this to specify this album as the source for your pictures.

Now for the code. Because we are using Jquery (which rocks by the way) you have access to the built in getJson method:
[cc lang=”javascript” width=”598″ line_numbers=”true”]$.getJSON(“”, function(data){
$.each(, function(i,item){
var photo = ‘http://farm’ + + ‘’ + item.server + ‘/’ + + ‘_’ + item.originalsecret + ‘_o.jpg’;
$(““).attr({src: photo, alt: item.title, title: item.title}).appendTo(“#images”).wrap(“

Just replace the APIKEY and the SETID in line 1 above with your info. If you simply paste this into a web page you will see the returned images:
[cc lang=”html4strict” width=”598″ line_numbers=”true”]

You will notice that in this code there is a div with an id of “images”. The Jquery function grabs the images from Flickr and inserts them into this div with another div with a class of .bigimg. The code above just lays these images down (no styles are applied). However, any css that defines styling for a class of .bigimg would be applied as the images are inserted.

Another reason applying the .bigimg class and style is important is that it provides a handle for other javascript/jquery plugins to manipulate the images. Once the images are appended to the document, the next step is to call your slider plug-in of choice. Fancybox is one of our favorites, but there are many and the the example site (top) uses Jcarousel and Jcycle.

In order to accomplish this, you may need to alter the html being generated by the function above to match the needs of the slider plug-in. Some require UL/LI markup for each img and so on.


The author admin