jQuery Flickr plug-in is a JavaScript interface for Flickr Services API written on top of the jQuery library. It’s function is to process a Flickr API Standard Photo List returned in JSON and create a semantic gallery (unordered list) of thumbnail images (list items) with links to full size images. When combined with jQuery Litebox, a rich slide show, lightbox plug-in, jQuery Flickr provides a completely client-side solution, for integrating Flickr into your website, perfect for hosted blogs.
Update

Big change in jQuery Flickr plug-in: jQuery Litebox has been decoupled from the plug-in. Instead, the plug-in now supports a custom callback to be applied after the search results have been returned by Flickr. Example:

jQuery(function(){
  jQuery("#gallery-litebox").flickr({
    api_key: "your_api_key",
    callback: liteboxCallback
  });
});
function liteboxCallback(el){
  jQuery(el).litebox(yourSettingsObject);
}

Features

* no server-side proxy required.
* easy to implement: $(“#myElement”).flickr();
* supports custom callbacks, and custom requests
* returns recent photos & photosets by id
* returns sorted search results by user id, group id, tags, or text
* configure thumbnail size and image size
* built-in jQuery Litebox slideshow integration
* tested in Firefox 1.5-2.0, Internet Explorer 6.0-7.0, and Opera 8.53 Windows
* requires a Flickr Services API Key
* requires jQuery 1.2 or greater
Settings:

api_key: null,      // [string]
    required, see http://www.flickr.com/services/api/misc.api_keys.html
type: null,         // [string]
    allowed values: 'photoset', 'search', default: 'flickr.photos.getRecent'
photoset_id: null,  // [string]
    required, for type=='photoset'
text: null,         // [string]
    for type=='search' free text search
user_id: null,      // [string]
    for type=='search' search by user id
group_id: null,     // [string]
    for type=='search' search by group id
tags: null,         // [string]
    for type=='search' comma separated list
tag_mode: 'any',    // [string]
    for type=='search' allowed values: 'any' (OR), 'all' (AND)
sort: 'relevance',  // [string]
    for type=='search' allowed values: 'date-posted-asc', 'date-posted-desc',
    'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc',
    'relevance'
thumb_size: 's',    // [string]
    allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
size: null,         // [string]
    allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
per_page: 100,      // [integer]
    allowed values: max of 500
page: 1,            // [integer]
    see paging notes
attr: '',           // [string]
    optional, attributes applied to thumbnail <a> tag
api_url: null,      // [string]
    optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
params: '',         // [string]
    optional, custom arguments,
    see http://www.flickr.com/services/api/flickr.photos.search.html
api_callback: '?',  // [string]
    optional, custom callback in flickr JSON-P response
callback: null      // [function]
    optional, callback function applied to entire %lt;ul%gt;
</a>

PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide
hooks for a custom paging routine within the %lt;ul%gt; created by the plug-in, there are two
hidden %lt;input%gt; tags, input:eq(0): current page, input:eq(1): total number of pages,
input:eq(2): images per page, input:eq(3): total number of images

SEARCH NOTES: when setting type to ’search’ at least one search parameter must also be
passed text, user_id, group_id, or tags

SIZE NOTES: photos must allow viewing original size for size ‘o’ to function, if not,
default size is shown

Demo: http://www.flickr.com/

Download: http://www.projectatomic.com/wordpress/wp-content/uploads/code/jquery.flickr-1.0.js

http://www.projectatomic.com/wordpress/wp-content/uploads/code/jquery.flickr-1.0-min.js

Source: http://www.projectatomic.com/2008/04/jquery-flickr/

Related Listings:

1. Dynamic flickr Badge Script A work colleague who runs Tobago Retreats asked me to...
2. Pulling Your Flickr Feed with jQuery Feeds are the easiest way to view updated content, whether...
3. Flickr Like Edit in Place How to edit in place using AJAX? If you are...
4. jQuery.flickrGallery Displays four photosets from flickr. One of them is invalid,...
5. Flickr Like Horizontal Menu Script Do you like Flickr and its simple and clean interface?...

Do you like this post?

Email: