jQuery Flickr
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);
}
Download
jquery.flickr-1.0.js
jquery.flickr-1.0-min.js
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
Demo
This demo loads the default settings for the jQuery Plug-in, the latest photos uploaded to flickr.com.
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;
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
May 20th, 2008 at 10:25:00
[...] Flickr support added by jQuery Flickr. Now you can add a rich AJAX experience to your website entirely with client-side [...]
June 11th, 2008 at 12:12:21
fantastic plugin. lots of great options. one question though - how can i change the default link from the static image, to the photo detail view on flickr?
June 11th, 2008 at 09:55:46
Hello, demo doesn’t work on my computer, it opens links in new pages (Mac OS 10.4.11 / Firefox 3 / Safari 3 / Javascript activated).
June 11th, 2008 at 10:13:23
thanks for this great plugin. after struggling with writing my own, i found this!
curious though - how can i change the link on the thumbnail from the static image to the photo page on flickr?
June 11th, 2008 at 11:28:07
Hi there,
Thanks for the great jQuery Flickr plugin.
I’ve got it working which wasn’t very hard, thanks for that.
I’ve got one question though, you are linking the direct image.
Is there a way to link to the flickr page with the photostream on the right side?
For example this page: http://www.flickr.com/photos/timsterrr/2562185934/
Hope to hear from you.
Thanks in advanced,
Timothy
June 11th, 2008 at 02:04:14
I am going to add the option to link to the Flickr page for the image instead of the actual image with the next update of the plug-in. In the meantime, the following line of code:
var h = 'http://www.flickr.com/photos/' + photo['owner'] + ‘/’ + photo['id'];added right before:
list.append('<li><a href="'+h+'" ...line 77 (uncompressed version)
should link to the Flickr photo page (sorry, I haven’t extensively tested this hack, but it should work). It basically overrides the
hvariable set in the preceding lines of code (I should have implemented this approach from the start, since it is a little more straightforward).I appreciate the feedback, as I really don’t use Flickr myself. Stay tuned for an updated plug-in that incorporates this option.
June 11th, 2008 at 11:47:04
Thanks Daniel!
It works great, thanks for the fast answer.
Again, great work and thanks for that.
June 19th, 2008 at 06:55:30
Hello Daniel, Nice work!
I was wondering why appending this line:
var h = ‘http://www.flickr.com/photos/’ + photo['owner'] + ‘/’ + photo['id'];
to the code, prior to list.append
results in no image being displayed?
are the indices “owner” and “id” already in photo[]?
thank you.
June 19th, 2008 at 07:00:35
Nevermind there, the single quotations were the issue. Thanks again!
June 24th, 2008 at 02:56:34
Hi
I have the jQuery Flickr plugin working. It’s really great, thanks. I’m sorry I don’t understand how to get the jQuery Litebox element working with the Flickr plugin. Do you have an example of it working somewhere? I have Litebox working imdependently of the Flickr plugin.
Thanks in advance. RJS
June 25th, 2008 at 04:24:10
Hey I am using this script, and it works great, but even with the “o” original size attribute in the script, I am getting the 500px wide medium image. I have the originals set for availability.
Here are the 3 images I am trying to get the originals of:
http://flickr.com/photos/thecrowells/sets/72157605707038041/
And here is my call for the script:
//load the pictures from flickr
$(”#home-pics”).flickr({
api_key: “12345678901234567890″,
type: “photoset”,
photoset_id: “72157605707038041″,
thumb_size: “s”,
size: “o”,
callback: runSlideshow
});
As I said its all working great but I can’t ge tthe originals. Help?
June 25th, 2008 at 10:16:18
[RJS] I’m using the following code on my Litebox post (condensed for clarity):
jQuery(function(){ jQuery("#gallery-litebox").flickr({ api_key: "your-api-key", callback: liteboxCallback }); }); function liteboxCallback(el){ jQuery(el).litebox(); }There was recently a pretty big change in the Flickr plug-in, native support for the Litebox plug-in was removed in favor of a more open callback method. Please make sure you have the latest version of the Flickr plug-in.
June 25th, 2008 at 10:25:11
[Chad] I did a little investigating on Flickr, and it seems you need to have a Pro (paid) account in order to make original format images available.
See: http://www.flickr.com/help/photos/?search=original+format#18
I have modified the Flickr plug-in to at least show the largest size image if the original is not available. Please download the latest version of the plug-in for the update.
June 26th, 2008 at 10:29:08
Thanks for the update Daniel - but I am a pro member and have been for years. I did have some security settings I think that were keeping the originals from being available to “everyone”. Thanks.
July 1st, 2008 at 07:03:56
2 hacks for you. Randomise images and cutoff - that is only show a set number of images (works alongside randomise and per_page)
1. add this to lines 30 & 31 of the code (part of the var s = { code
randomise: false, // [bool] optional, randomise the array of images (willwade at gmail.com)
cutoff: null // [integer] optional, set a cut off number.. use alongside per_page (willwade at gmail.com)
2. add this to lines 51 & 52 (once the above is inputted)
if (s.randomise) { r.photos.photo.sort(function() {return 0.5 - Math.random()}); }
if (s.cutoff) { d = s.cutoff } else { d = r.photos.photo.length; }
July 2nd, 2008 at 08:14:08
Has anyone had a stab at getting pagentation to work yet. Love this plugin and the would really complete it.
Thanks in advance
Pete
July 26th, 2008 at 01:37:09
Can someone please post some example code that uses the ‘params’ argument?
I’m trying to use the ‘min_taken_date’ and ‘max_taken_date’ custom arguments in my own code.
August 4th, 2008 at 08:50:31
I left the params setting as open as possible because it just gets tacked on to the end of the flickr request. Since it is at the end of a GET request, params must be prefixed with an ampersand, as in:
jQuery(function(){ jQuery("#gallery-litebox").flickr({ api_key: "your-api-key", params: "&min_taken_date=2007-08-04&max_taken_date=2008-08-04" }); });Dates must be in mySql datetime format.
August 17th, 2008 at 04:04:15
[...] The JFlickr module delivers a flickr gallery to your desktop using the excellent Jquery script from Project Atomic. You can display galleries based on a photoset, user id, group id or a free text search. You also [...]
August 27th, 2008 at 10:06:11
Love the plugin. One comment: there are a whole suite of error codes that are returned on a failed query (see http://www.flickr.com/services/api/flickr.photos.search.html). It would be fantastic if the library included these error handling parameters, and in the case of getting one returned, output the error code to the page rather than just not showing the photostream.
Otherwise, great work!
September 22nd, 2008 at 03:05:56
Great job on the plugin, but i was wondering if it’s possible to display the picture, not the thumbnail, or just show the thumbnail at 500*x?
Thanks in advance,
-Stopa
September 25th, 2008 at 10:53:33
@Daniel:
“I have modified the Flickr plug-in to at least show the largest size image if the original is not available. Please download the latest version of the plug-in for the update.”
I tried the latest download link in the post (1.0) but it’s still not displaying images if there is no original size available (when setting size:’o').
Am I using the wrong link?
thanks
October 3rd, 2008 at 02:51:29
So to get the randomize working, what to put to the “false”:
randomise: false, // [bool] optional, randomise the array of images (willwade at gmail.com)
?
October 13th, 2008 at 06:08:49
I am using jquery 1.2.6 (latest version) - the requirements says I need 1.2.3 - can this still work with the latest version?
October 13th, 2008 at 08:53:45
@Ed
This plug-in is compatible with jQuery 1.2.6 (that is the version this site uses). Version 1.2.3 is what I developed this plug-in with. Is should work with any version greater that 1.2, and I have updated the requirements accordingly.
October 20th, 2008 at 01:00:34
Hello. It´s works fine for me. But I wan’t to know if is possible to get photos from photosets or tags albums separated by title. For example:
MUSIC
Photos from “music” tag album
LANDSCAPES
Photos forma “landscapes” tag album
Thanks in advance.
November 1st, 2008 at 01:52:01
Completely awesome, great plugin. Was perfect for what I needed (displaying a photoset). Worked great with jquery lightbox plugin. Looking forward to using this for more things. Thanks so much!
November 16th, 2008 at 11:40:36
Just finished putting together a Joomla plugin using jQuery Flickr. Thanks for the great plugin! Also, thanks to Jack Killpatrick for steering me in the right direction regarding jQuery Lightbox.
http://joomla.paulthompson.net