How to display Flickr images on your own website

I've struggled for a long time trying to find a way to elegantly and simply display my flickr photos on my site. Up 'til now I've had to stick with slideshow apps from other websites like flickriver.

This is until I found this blueimp Gallery when I was looking for some lightbox coding for my website. I didn't end up using the blueimp lightbox because I went with fancybox as it was already built into getsimple I just had to enable it with a tiny plugin. I did however utilise the code to gather a list of photos from Flickr.

The code is great; it calls the Flikr API people.getPhotos from ajax and neatly writes the thumbnail html into the blank div of your choosing.

It took me a while to tweak it to show my own photostream from its default interingness list, but now I have it I'm pretty pleased how simple, easy and effective it is.

Instructions

Add the page code

In the place you want the thumbnails to appear insert the following div & also place the link to the script in your html code:

Install the JS file

Then save the javascript file down in the corresponding place (you can use the download link at the bottom), then change the user_id in the script to that of the one you want to display the images of.

Download JS

You can also tweak the thumbnail sizes by changing the underscored suffix in line 35, see the different settings here. _q denotes 150x150px image. You can also change the size of picture the photo links to by changing the _b on line 36.

Additionally you can set the number of photos to get, the default is 100 but you can have up to 500 as required.

jQuery

Next you need to ensure you have a jQuery installed on your page, you can either do this via a link to a CDN or host the script file yourself.

Enjoy

If all went well, when you fire up your webpage you should see the thumbnails of your Flikr phhotostream.