(Some of) the Flickr API in jQuery

And by some of I mean 4 methods (at the time of this writing, at least). However, the use case for this little plugin is for sites like this one, where you may just want to share a few of your recent photos.

I recently had to redo a site that dealt with Flickr (no, not this one). So I was on the hunt for some sort of Flickr library for jQuery. Much to my surprise, there weren’t too many. The one’s that I did find just weren’t going to cut it, so that gave me an excuse to write my own.

You can find it on GitHub. See examples.html for, well, examples. Once you add your API key, you should see something like this:

It’s pretty simple to use, and rather than explain it, I’ll just show you.

1
2
3
4
5

$('#photos').flickr({
  api_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  thumbnail_size: 'sq',
  link_to_size: 'm'
}).photosGetRecent().addClass('thumbnails')

Now, a few things to mention, one being the available sizes and what they mean. Firstly, the thumbnail_size is the size of what you’ll actually see, and the link_to_size is the size for what the image links to (useful for lightbox stuff). You can set the link_to_size to ‘flickr’ if you want the thumbnails to link directly back to the image on Flickr’s site. Now, on to the available sizes:

'sq' // => square
't'  // => thumbnail
's'  // => small
'm'  // => medium (default for @link_to_size@)

Now onto the cooler stuff.

The jQuery object that first receives the flickr() call is what will get filled with the resultant images. The flickr() method accepts some configuration (api_key is required), then returns an object housing all of the available API methods, allowing you to chain the API call. The cool thing is, each of the implemented API methods return the original jQuery object, so you can continue processing it as you normally would. In the above example, $('#photos') is returned after the photosGetRecent() call. Maybe this will help show you why this is important:

1
2
3

$('#photos').flickr({
  api_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).photosGetRecent().find('a').facebox()

I originally thought it would be good just go ahead and return the inserted collection of images, but there are cases where a user may want to modify the list items or the links or the images, separately, and that’s just not my place to decide :-)

Oh, and just a heads up. You can set the defaults for the flickr() method in the javascript itself (somewhere near the end). Then your calls become:

1

$('#photos').flickr().photosGetRecent().find('a').facebox()

A little bit nicer. And in case it’s not obvious, options that you pass to the flickr() method will override those defaults in the javascript.

Each of the available API methods support all of the options located in the Flickr API documentation. And here’s a quick list of the supported methods:

• photosGetRecent()
• photosGetContactsPublicPhotos()
• photosSearch() (by far the most powerful)
• photosetsGetPhotos()

I’ll soon be migrating my current Flickr importing to use javascript, and specifically, this plugin. Remember, the source is on GitHub if you’re interested.

Thoughts are welcome. Enjoy!