jquery-flickr
jquery-flickr copied to clipboard
rpheath
Implements (some of) the Flickr API using jQuery.
h1. (Some of) the Flickr API in jQuery.
Sometimes all you need is a simple javascript interface to pull in Flickr photos.
h4. Requirements
Your Flickr API key.
h2. 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...
h2. 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 ...
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.
h2. 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.
h2. 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', count: 8})
// recent 10 photos from a user's stream
$('#photos').flickr(config).photosSearch({user_id: 'xxx', count: 10})
// recent 10 photos from a user's stream with the tag 'portfolio'
$('#photos').flickr(config).photosSearch({user_id: 'xxx', count: 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":http://flickr.com/services/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.
h2. License
(c) 2008 Ryan Heath, released under the MIT license
rpheath