flimshaw / jquery-flickr

Implements (some of) the Flickr API using jQuery.

(Some of) the Flickr API in jQuery.

Sometimes all you need is a simple javascript interface to pull in Flickr photos.

Requirements

Your Flickr API key.

Why?

Because I love javascript. Also, because I had to solve this problem recently, and the current solutions were
too “not my style”. Most had a universal flickr() method that required the user to pass a string of the method
to be executed. I’d rather just call a method than explain what method to call. Which brings me into my next point…

Chaining

Something common to jQuery users is the ability to chain method calls. Well, I took that a step further when
designing out the plugin interface. Initially, the user calls flickr() on the jQuery object, which then makes all
of the supported Flickr API calls available, allowing the user to “chain” the API call directly to the flickr() object.
And the beauty is that the result of the API call will then return the original jQuery object, so you can continue
chaining on your merry way :-)

An example speaks a thousand words, I know…

$('#photos').flickr({api_key: 'xxx'}).getRecentPhotos({per_page: 2}).addClass('thumbnails')

// returns something like ...

<div id="photos" class="thumbnails">
  <ul class="flickr">
    <li>
      <a title="<image title>" href="http://www.flickr.com/photos/<user_id>/<photo_id>/">
        <img alt="<image title>" src="<square thumbnail url>"/>
      </a>
    </li>
    <li>
      <a title="<image title>" href="http://www.flickr.com/photos/<user_id>/<photo_id>/">
        <img alt="<image title>" src="<square thumbnail url>"/>
      </a>
    </li>
  </ul>
</div>

You can see how calling addClass() at the very end was pretty much the same as calling $('#photos').addClass() directly.
Again, the chained Flickr API call returns the original jQuery object.

Handling Sizes

If no link_to_size is specified in the configuration, the thumbnails will link back to flickr.

Available sizes include:

• ‘sq’ // => square
• ‘t’ // => thumbnail
• ‘s’ // => small
• ‘m’ // => medium

Any invalid size will default to ‘m’. You can also specify the thumbnail size in the same manner, but by passing a
thumbnail_size options to the flickr() method.

Examples

// common configuration
var config = {
  api_key: 'xxx',
  thumbnail_size: 'sq'
}

// recent public photos
$('#photos').flickr(config).photosGetRecent()

// recent 8 photos from a user's contacts
$('#photos').flickr(config).photosGetContactsPublicPhotos({user_id: 'xxx', per_page: 8})

// recent 10 photos from a user's stream
$('#photos').flickr(config).photosSearch({user_id: 'xxx', per_page: 10})

// recent 10 photos from a user's stream with the tag 'portfolio'
$('#photos').flickr(config).photosSearch({user_id: 'xxx', per_page: 10, tags: 'portfolio'})

// recent 10 photos from a particular photoset
$('#photoset').flickr(config).photosetsGetPhotos({photoset_id: '72157600185772527', per_page: 10})

You get the idea. All of the options listed on the Flickr API (for the supported methods)
are available. The photosSearch() method is by far the most useful – perfect for showing your photos on your blog or site.

License

© 2008 Ryan Heath, released under the MIT license