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
November 26th, 2008 at 02:49:24
Thanks for the great plugin!
I can get it working using type: photoset and photoset_id: ‘whatever’.
However, i’m unable to use the URL of a JSON feed to display the photos.. can you provide the correct settings to display images from a JSON feed such as http://api.flickr.com/services/feeds/groups_pool.gne? id=675729@N22&lang=en-us&format=json ?
I was entering this as a string for api_url:, but have no idea if that is correct or not! Thanks in advance.
November 26th, 2008 at 06:19:03
Thanks for this great plugin!
One question: Is there a way to get the User’s name instead of the ID by using the photo['term']?
Also, is there some sort of reference of what elements are included in the photo-array?
Thanks so much
Frederik
December 13th, 2008 at 12:26:27
Hey Daniel, thanks for making this available, it’s pretty cool. I’m having issues with the “automatic” playing with the litebox, though (is anyone else?)
It starts out playing fine, but then gets, well, kinda funky around the 4th transitioned photo. The photos start to distort and flicker (no pun intended). It looks like this is when the script goes out to flickr to fetch the larger photos.
I also noticed an issue with the loading indicator. In jquery_litebox.js, up at the top in the var s = {}, it defines the loading graphic width and height. When using your loading graphic (http://www.projectatomic.com/wordpress/wp-includes/js/thickbox/loadingAnimation.gif) it gets really distorted to a box, not a long, thin rectangle. Took me a couple minutes to figure out what the heck I was seeing.
I changed my params to lh:13,lw:208 (the dimensions of your loading gif) and the loading graphic displays non-distorted now (I have a local copy of the animated gif).
Sometimes the loading graphic will “blink” as if it’s just transitioning from loading graphic to loading graphic instead of the next photo as well. Then it’ll just display the end photo, usually a bit distorted.
December 17th, 2008 at 06:40:41
Help!
It didn’t work for me. None of my photos load when I replaced ‘api_key=null’ to my ‘api_key=(my api key)’. My public photos did not even appear.
January 9th, 2009 at 01:05:36
Anyone knows how to make it work with Shadowbox (http://www.mjijackson.com/shadowbox/). When an image is click it opens in a shadowbox lightwindow.
January 11th, 2009 at 09:39:29
hi,
is there a way to pass something like the following as attr:
class=”myclass” onmouseover=”this.className=’transON’” onmouseout=”this.className=’transOFF’”
cheers
January 15th, 2009 at 12:33:16
[...] jQuery Flickr - projectatomic.com [...]
January 15th, 2009 at 04:16:39
Hey, is that possible to have comments of each pictures ?
I find that (http://www.flickr.com/services/api/flickr.photos.comments.getList.html) maybe you can help me please?
January 20th, 2009 at 09:45:46
Does anyone have a working example of this plugin working with a slideshow? I’d love to see it in action before I try it on my own site.
February 1st, 2009 at 11:44:15
I can’t get this to work. I am new to jquery, but maybe someone could just detail the steps to implement this, perhaps I have missed something
February 15th, 2009 at 11:08:13
I’ve found a bug. Flickr images containing ’special’ HTML characters (&, , etc.) break. If you’re using a strict XHTML page, inserting such characters into HTML nodes results in DOM_MODIFICATION_EXCEPTIONs. So either (a) some escaping mechanism needs to be written, or (b) the description insertion should be performed using JQuery’s text() methods, which perform such escaping automatically.
February 19th, 2009 at 11:32:28
The Code to get the largest image possible is NOT WORKING for me.
I am using 1.2.6, and i’ve setuped it to show LARGE images, but ALL the images that i don’t have LARGE versions are just returning an FLICKR ERROR, cause it’s looking for _O or _B image, but they don’t exist… 
Please…Help me. 
I am using it thru the “Paul Thompson” extension (http://joomla.paulthompson.net/) … Thanks for ANY help…
I’ve looking at the .JS file and there’s is a conditional line there to avoid that problema, but i don’t know why it’s not working. ;( And the TAG filter is not working too.
March 5th, 2009 at 08:52:29
The gallary and slider are not working properly. When I use the next and prev buttons, the slider moves but the pics in the gallary are static… Not sure why this is happening. I really like this plugin and want it to work! Help if you can!
March 12th, 2009 at 06:30:47
hi,
i need to change tags with context metakey related to the article in mainbody i’m watching
like this:
http://bollentispiriti.regione.puglia.it/_deff/index.php?option=com_content&task=view&id=93&Itemid=1300104
watch the link tab
can someone help me?
thx
March 16th, 2009 at 05:06:29
прикольная вещь
March 18th, 2009 at 05:13:07
I have this plugin working with Highslide on the photo gallery page. Has anyone figured out a way to paginate this?
March 23rd, 2009 at 06:57:02
“Anyone knows how to make it work with Shadowbox (http://www.mjijackson.com/shadowbox/). When an image is click it opens in a shadowbox lightwindow.”
You need to edit the append to include rel=”shadowbox”, or create a callback fn to add the attribute.
list.append(’‘);
March 24th, 2009 at 09:17:52
It may be important to note that the callback returns the whole unordered list. Some node traversing may be required.
@Implementing Shadowbox (correctly)
Callback function to add relation = shadowbox for the anchors.
jQuery(function(){
jQuery(”#gallery”).flickr({
api_key: “your-api-key”,
callback: sBox });
});
function sBox(p){
$($($(p).children()).children()).attr(”rel”, “shadowbox”);
}
March 24th, 2009 at 09:38:56
Hi, can you give a example how to make the pagination works?
eg. How can i make it loop 40 image for each UL?
thanks
Adam
March 26th, 2009 at 01:20:05
I’d like to be able to take the list that this plugin generates and use it with another jQuery plugin, but I’m struggling to get this to happen. Basically, I’d like to call a carousel or innerfade function using the this plugin creates.
How do I do this? The script is putting the list items into ul#portfolio - I can verify this by looking at the generated source code. The innerfade function is calling ul#portfolio but it isn’t executing. If I manually code in a ul#portfolio and skip the flickr plugin, the innerfade plugin works - the problem occurs when I try to combine them. I’m obviously not going about this the right way. Suggestions?
Thanks
jQuery(function(){
jQuery(”#gallery-flickr”).flickr({
api_key: “c85381934817ca710db807d10552ae6c”,
per_page: 5,
thumb_size: ‘m’,
type: ’search’,
user_id: ‘36575022@N04′
});
$(’ul#portfolio’).innerfade({
speed: 800,
timeout: 3000,
type: ’sequence’,
containerheight: ‘220px’
});
});
March 27th, 2009 at 08:14:51
I have a commercial project that I am looking to pull photo descriptions from flickr for, in coordination with jQuery Flickr. I believe THIS code needs to be augmented to include a call to flickrAPI…..getInfo for each photo… - anybody game to try it out? Cash Reward for finding it for me.
March 28th, 2009 at 05:15:06
Hi, I have used the jquery flickr plugin because it came with a commercial template. It works fine in safari and firefox on my mac but has all kind of display difficulties on windows and esp with IE6 and 7. Sometimes it does not display at all. The guy who made the template said I should update the template to the latest version, but alas to no avail. What could be the problem?
April 3rd, 2009 at 05:20:38
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 im…
April 9th, 2009 at 10:21:25
Hi, can you give a example how to make the pagination works?
eg. How can i make it loop 40 image for each UL?
Thanks in advanced~
Lynn
May 6th, 2009 at 05:42:43
Thanks for this great plugin!
May 6th, 2009 at 05:43:44
I am looking to pull photo descriptions from flickr for
May 8th, 2009 at 02:29:01
[...] blog. Easy to customise with classes already defined for you. I found the Flickr feed from Project Atomic which lets you launch your Flickr images in lightbox, or with a little extra modification, link [...]
June 9th, 2009 at 06:06:48
thanks
Adam