A jQuery Flickr Feed Plugin
View the Demo | Download the Zip
We often work with clients that maintain accounts with Twitter, Flickr, Youtube and other services in addition to their website. Often they will want to pull in data from one of their accounts to their website. With Flickr, this is pretty easy because they make a simple API available. Having worked with it a few times, we decided to make it even easier to pull photos from a public feed.
There are a few examples of this in use on the demo page. All of the photos on this page have been used with the generous permission of John Roberts (@jroberts13).
Plugin Overview
This plugin works by pulling a JSON feed from Flickr and applying the data it gets back to a template. For example, we can generate this list of pictures:
<ul> <li><img alt="Photo Title" src="http://farm4.static.flickr.com..." /></li> <li><img alt="Second Photo Title" src="http://farm4.static.flickr.com..." /></li> </ul>
From the following jQuery:
$('ul').jflickrfeed({
limit: 2,
qstrings: {
id: '44802888@N04'
},
itemTemplate: '<li><img alt="{{title}}" src="{{image_s}}" /></li>'
});
The plugin gets the feed from Flickr using AJAX and applies each image it gets back to the provided template.
The Plugin Options
There are a number of options available on the plugin, these are the defaults:
flickrbase: 'http://api.flickr.com/services/feeds/',
feedapi: 'photos_public.gne',
limit: 20,
qstrings: {
lang: 'en-us',
format: 'json',
jsoncallback: '?'
},
cleanDescription: true,
useTemplate: true,
itemTemplate: '',
itemCallback: function(){}
Here is a description of each one:
- flickrbase: This is unlikely to be needed. It is used to set up the url the jQuery AJAX call will need to be made to.
- feedapi: There are a number of feeds that flickr makes available. The default is the public feed. Here is the list of all that are available: http://www.flickr.com/services/feeds/. This has only been tested on feeds that return photos. So, for example, don't expect good results using this plugin on the Forum discussion feeds.
- limit: Set how many items you want to loop through. Flickr seems to limit its feeds to 20, so that is the default.
- qstrings: This is the most important setting. This is used to request the correct feed. In my examples I use this to set the user id. These are automatically added to the request url. Depending on which feed you use (http://www.flickr.com/services/feeds/) there are different sets of query parameters available: http://www.flickr.com/services/feeds/.
- cleanDescription: Flickr puts all kinds of junk in the description it returns. By default this plugin is set to remove everything but the plain photo description.
- useTemplate: Set this to false if you don't want to use the plugins templating system.
- itemTemplate: The template rules are described below.
- itemCallback: You can add a callback on each item. The scope is set to the container and the item object is made available.
Typically, the only things that will need to be set are limit, qstrings.id and itemTemplate.
Using the Templates
In order to make it really easy to use any kind of markup needed with this plugin, a simple templating system has been build in. Here is an example of a template:
<li>
<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>
</li>
You can see that this is just basic html with a few special tags mixed in. All of the tags are surrouned by double curly braces. The plugin works by putting in the correct information for each tag and each item into the template.
The tags that are available depend on what flickr returns for each item. For the Public Photos API these are: title, link, date_taken, description, published, author, author_id, tags, and image. For the image property, the plugin uses the Flickr URL scheme to make several sizes available. You can read about this at http://www.flickr.com/services/api/misc.urls.html. The image tags available are: image_s, image_t, image_m, image, image_b.
The Callback Parameter and Integration
The plugin's second parameter is a callback. This has the scope of the containing element and has the entire data response available. This is a great feature if you want to integrate this plugin with others. Let's say you want to integrate it with colorbox. If you call $('selector').colorbox() and then this plugin it won't work. This is becuase the plugin is adding elements to the page after the colorbox call. This is even true if you call colorbox after this plugin. Since this uses ajax, your images won't be added to the page until well after most of your javascript has run. (In computer time).
Instead, the trick is to use the callback function. This allows you to pass in code that you want to run after the images have loaded. So for example, you can do this:
$('#cbox').jflickrfeed({
limit: 14,
qstrings: {
id: '37304598@N02'
},
itemTemplate: '...example...'
}, function(data) {
$('#cbox a').colorbox();
});
Now the colorbox call won't be made on the photos until they are loaded.
Demo and Download
You can see a demo of this plugin on the demo page. Additionally you can download a zip of this plugin and the example.
As always, if you have any questions or comments, leave them below. Enjoy!
Comments
Eytan Buchman
Martin
Joel Sutherland
Kien
Fred
Joel Sutherland
Peter Vidani
Joel Sutherland
Jeff
Andreas
Joel Sutherland
ziggy hil
ziggy hil
Andreas
Alberto Contreras
Joel Sutherland
Alberto Contreras
Leslie
Joel Sutherland
Lonnie Minter
Elizabeth
Jason Day
Rob
Joel Sutherland
Brian McCulloh
Brian
Kyle Mark
Rob Che
Rob Che
Tiago Vieira
Jeremiah Castillo
lyn beeran
lyn beercan
lyn beercan
felipus
Ben
Kyle
Mike K.
Quick question...how do I make it so that the images, when clicked, open up in another window? Thanks so much for your great, descriptive tutorial!
Thanks!
Laurent Abbal
Here, the solution if you want pictures from a set.
1. In jflickrfeed.js and jflickrfeed.min.js change feedapi : feedapi:'photoset.gne'
2. In the script change qstring : qstrings: {set: 'yoursetid', nsid: 'yournsid'},
3. That's it!
If your want display several sets on a single page, change the rel in the link : <a rel="yoursetid" href=... and change fonction(data) like this : $("a[rel='yoursetid']").colorbox();
Joel Sutherland
DharmaLove
$('#basicuse').jflickrfeed({
limit: 14,
qstrings: {
set: '72157625009482824',
nsid: '76986464@N00'
},
itemTemplate:
''
''
''
});
You can see my id's in this link:
http://api.flickr.com/services/feeds/photoset.gne?set=72157625009482824&nsid=76986464@N00&lang=en-us
thanks for your help, and Joel, thanks for the great code!
marcus
marcus
marcus
qstrings: {
id: '76986464@N00', tags:'flowers'
}
works perfect [=
Ammy
Kevin
Matt
Hey I was wondering why on my page for some reason I am only getting 21 images to appear.
I have plenty of sets that have images in them that are tagged "tour images"
I clearly have more that 21 to display.
Is there something that I may have done wrong? I have set my limit to 200... but I still am only getting 21.
Matt
Matt
Tim
Above all, love it - thank you very much!!!
Tim
Thanks for this code again, brilliant! :)
Shane
The test page that proves that I have more than 20 photos is @ http://designshac.com/dsherman/test.php
I want to use your plugin, I think it's better than what I current have, especially if you can get it to go past 20 photos. But the only problem is I love the Highslide lightbox. So if you could implement Highslide with your plugin rather than Color Box, I would be sold.
Because based on the plugins of my test page, there is no way to call the description of the photo. You wonderful plugin does this and that is a must for me.
Any help on that?
Joel Sutherland
The link you posted is using an API Key. There are more methods available when you use that.
This plugin does not depend on colorbox. Notice that I am calling that separately after I load the flickr pictures.
ali
http://dribbblecards.co.uk/
ali
Joel Sutherland
Just change the feedapi value to 'groups_pool.gne'.
You can use any of the public feeds in the Flickr API link above.
Vlad
You can use {{image_b}} - it'll display image with 1024 px on the largest size - if you don't have super big images it should be enough
Brad
fuzzonce
first, thanks for very good script.
My problem is that I get the Flickr pictures as background of the tag , so I can always have the same size of the thumbs, regardless of the actual size of the photo on Flickr. However, trying to assign ownership inline (
It 'can get around this?
Thanks to all
fuzzonce
the form field has eat a piece of my comment...
The original comment was:
my problem is that I get the pictures as background of flick, so you always have the same size, regardless of the actual size of the photo. However, trying to assign ownership inline (li style = "url (href =" image_m {{}} ") no-repeat ...), everything that should be assigned to the style, I will be deleted. The end result is li style = "" .... It 'can get around this?
Thanks to all
Drew
Joel Sutherland
Great idea -- I'll work on adding that.
Guillermo
http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin#comment-d043cc13b7034bdaa1ef683a7f62e280
And i entered the group id like this:
qstrings: {
id: '1612197@N22'
},
Any clue?
Guillermo
jsonp1292540567535({
"title": "Mural de La Casa del Rio",
"link": "http://www.flickr.com/groups/lacasadelrio/pool/",
"description": "Imagenes subidas por huespedes del hotel La Casa del Rio.",
"modified": "1970-01-01T00:00:00Z",
"generator": "http://www.flickr.com/",
"items": [
]
})
That is the response to this call, generated by the jflickrfeed plugin:
http://api.flickr.com/services/feeds/groups_pool.gne?lang=es-us&format=json&jsoncallback=jsonp1292540567535&id=1612197@N22
So, give me a rope. What's wrong with my group?
Guillermo
Adrian
itadakimazu
I just wonder if it's technically possible to link each photo to its flickr page (ex: flickr.com/photos/username/XXXXXXXX) instead of farm4.static.flickr.com/XXXXXXX?
e11world
I hope someone or Flickr can remove the 20 picture limit on this, otherwise I will have to upload 20 imgs per set from now on. This is where my progress is if anyone wants to see the code http://www.georgeelias.net/media.html
I also wonder about itadakimazu's comment (img link)
Sam
I know, that's a serious limitation, right? Here's my fix, albeit a bit clunky.
Create multiple which each one tied to its own jquery command. Then, inside each jquery command, add the qstring 'tags:example_tag' for the first set of 20, 'tags:example_tag2' for the second set, and so on.
On flickr, go into organizr and grab the first twenty photos you want, add the tag 'example_tag' (or whatever) to the first 20, then add 'example_tag2' to the next 20 and so on.
Your HTML will look like this (note I'm using the colorbox plugin as well)
...etc.
And your jQuery will look like this:
$('#cbox').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/feeds/',
limit: 20,
feedapi: 'photos_public.gne',
qstrings: {
id: 'your_id',
tags: 'example_tag'
(rest of code omitted)
$('#cbox1').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/feeds/',
limit: 20,
feedapi: 'photos_public.gne',
qstrings: {
id: 'your_id',
tags: 'example_tag2'
(rest of code omitted)
For the ambitious, make jflickrfeed a function with 'tags' as the variable, then run it however many times you need (x/20 rounded up, where x is how many photos you have) with a FOR loop. Bam!
Sam
I know, that's a serious limitation, right? Here's my fix, albeit a bit clunky.
Create multiple which each one tied to its own jquery command. Then, inside each jquery command, add the qstring 'tags:example_tag' for the first set of 20, 'tags:example_tag2' for the second set, and so on.
On flickr, go into organizr and grab the first twenty photos you want, add the tag 'example_tag' (or whatever) to the first 20, then add 'example_tag2' to the next 20 and so on.
Your HTML will look like this (note I'm using the colorbox plugin as well)
...etc.
And your jQuery will look like this:
$('#cbox').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/feeds/',
limit: 20,
feedapi: 'photos_public.gne',
qstrings: {
id: 'your_id',
tags: 'example_tag'
(rest of code omitted)
$('#cbox1').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/feeds/',
limit: 20,
feedapi: 'photos_public.gne',
qstrings: {
id: 'your_id',
tags: 'example_tag2'
(rest of code omitted)
For the ambitious, make jflickrfeed a function with 'tags' as the variable, then run it however many times you need (x/20 rounded up, where x is how many photos you have) with a FOR loop. Bam!
Ilja
This is how I did it:
$(document).ready(function(){
$('ul.blokkendoos').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/rest/',
feedapi: '',
limit: 14,
qstrings: {
method: 'flickr.people.getPublicPhotos',
api_key: 'ece11208f56cd80fd36f32ad49d1b911',
user_id: '58632700@N04',
extras: 'description,title',
format: 'json'
},
itemTemplate: ''
}, function(data) {
$('#gallery-nav').galleriffic({
numThumbs: 50,
imageContainerSel: '#portfolio',
captionContainerSel: '#caption',
enableBottomPager: false,
renderSSControls: false,
renderNavControls: false,
defaultTransitionDuration: 200,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.blokkendoos').children()
.eq(prevIndex).fadeTo('fast', 1.0).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 1.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
});
As you can see I also try to use galleriffic to show the images and I just cannot get it to work. It seems that the list-items are not added to the dom when galleriffic is activated. Even though I activate galleriffic using the callback function.
Am I doing something wrong?
Ilja
This is how I did it:
$(document).ready(function(){
$('ul.blokkendoos').jflickrfeed({
flickrbase: 'http://api.flickr.com/services/rest/',
feedapi: '',
limit: 14,
qstrings: {
method: 'flickr.people.getPublicPhotos',
api_key: 'ece11208f56cd80fd36f32ad49d1b911',
user_id: '58632700@N04',
extras: 'description,title',
format: 'json'
},
itemTemplate: ''
}, function(data) {
$('#gallery-nav').galleriffic({
numThumbs: 50,
imageContainerSel: '#portfolio',
captionContainerSel: '#caption',
enableBottomPager: false,
renderSSControls: false,
renderNavControls: false,
defaultTransitionDuration: 200,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.blokkendoos').children()
.eq(prevIndex).fadeTo('fast', 1.0).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 1.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
});
As you can see I also try to use galleriffic to show the images and I just cannot get it to work. It seems that the list-items are not added to the dom when galleriffic is activated. Even though I activate galleriffic using the callback function.
Am I doing something wrong?
Tomas
CubixVision
CubixVision
John Paul
jason day
Samuel Hartman
See my crazy hack of flickrfeed here: http://www.clarksvilleschwinnracing.com/gallery.html
Ansimuz
I am trying to integrate a plugin like lightbox or prettyphoto to the thumbnails feed but wont work.
any ideas
heres the code for the template i am using with no luck:
itemTemplate:
''
''
''
thanks
harika
Charlotte Coleman
Ankara Nargile
zack
My Flickr gallery, on the other hand, appears exactly as it does in your example -- much smaller than the actual photo size. I cannot figure out what is reducing the photo size and how to override that.
Markuza
Victor Augusto
Daniel
Miriam
did anyone find out how to make the thumbnails bigger?
please help
THANKS
Miriam
bern
gutierrezalex
Gary
Mik
Sorry, my english is bad.. lol
Morad
Thanks so much :)
LD
http://trevordavis.net/blog/improving-a-flickr-plugin-
with-jquery
Just modify setup.js right before calling Colorbox with:
$("ul#cbox a").each(function() {
var imgSrc = $(this).children().attr('src');
$(this).attr('href', imgSrc.replace('_s.jpg', '_b.jpg'))
});
Paul
1. Go to Dopiaza.org and create an automated 'most interesting' set for my stream (today is day 1 so will need to monitor how it works).
2. Leave the jquery js script unaltered.
3. Go to Flickr and view the automatically created set URL which for me is http://api.flickr.com/services/feeds/photoset.gne?set=72157627368947868&nsid=63085897@N02&lang=en-us
4. Amend the script within my webpage http://www.iphone.photogenix.biz/ as follows:
$(document).ready(function(){
$('#cbox').jflickrfeed({
feedapi: 'photoset.gne',
limit: 14,
qstrings: {
set: '72157627368947868',
nsid: '63085897@N02'
},
itemTemplate: ... (used in conjunction with colorbox)
Seems to work a treat for me - does this answer some of the issues?? I'm not a programmer at all - just stumbled across it. Hope it helps.
Joel Urbina
Thank you for this... may make a few changes before I use it (nothing that big, just to make it work a little bit differently for me), but I'm loving what I see! Good work!
Eberth
pixel
Mersin Nakliyat
website designer peterborough
Marty
Code:
$('#basicuse').jflickrfeed({
limit: 2,
qstrings: {
id: '48068648@N06',
tags: 'tools'
},
itemTemplate:
''
''
''
});
Martin
Adam
Robert Scozzari
Thanks
Kieran Delaney
Here's the problem I'm running into though, I can't figure out how to get it to display the most recently added photos. I incorporated the plugin into a site I did for a friends tattoo parlor (www.nativerituals.net) so that each artist could keep their portfolios current, but the newer images they're uploading just aren't showing up.
Is there a way to set it up so that the images displayed are shown from newest to oldest?
Thanks again.
Moss
Sascha
Falesco
I installed the script on my website but it only shows 1 picture from flickr.. if i upload a new one it doesnt show... this is what i did:
$(document).ready(function(){
$('#flickrfeed').jflickrfeed({
limit: 12,
qstrings: {
id: '69573883@N08'
},
itemTemplate: ''
});
$('#nocallback').jflickrfeed({
limit: 4,
qstrings: {
id: '69573883@N08'
},
useTemplate: false,
itemCallback: function(item){
$(this).append("");
}
});
});
Bitbyte
$(document).ready(function(){
$('#flickrfeed').jflickrfeed({
limit: 12,
qstrings: {
id: '69573883@N08'
},
itemTemplate: ''
});
$('#nocallback').jflickrfeed({
limit: 4,
qstrings: {
id: '69573883@N08'
},
useTemplate: false,
itemCallback: function(item){
$(this).append("");
}
});
});
Steven
Please let me know thanks!!
Steven
Please help!
Jason
Rachel
mark
Small:
{{image_s}}
Medium:
{{image}}
Large (if available):
{{image_b}}
apologies for the multiple posts - there's no preview, no delete options and it didn't show the code. Fingers crossed it works this time...
Dianna
Alice
By the way those dogs are SO cute!! What breed are they?
Aniket
But I have an issue. I am using http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js instead of jquery 1.4.2 and the colorbox stops working. It just shows the overlay, thats it. doesnt show me the image also.
can anyone help me?
Fabricio
ivo
Friskies49
Phil
Only one problem:
i used to compress my js files with jgz, but colorbox doesn't work with it, don't know why, you can see flickr thumbs but cant open any pics.
this is my experience, so be careful if you compress your js files in your server.
Corbett
1) download the latest colorbox to work with the latest jquery code. or alternatively, use a different lightbox code.
2) I successfully got the "sets" feature working getting past the Flickr 20 photo limit plus using some creative code I have the lightbox grouping all of the photos into a single set for navigating.
3) view the gallery I created here: http://bigrockanimalclinic.com/photos.php
Thank you Joel for the code, and Laurent for the adjustments to sets. Works perfect!
Corbett
So that is 3 Flickr sets, being called by 3 instances of the script, tarketing one single UL item. The view source on my page for the code.
futures trading
Yutaro
Now I'm in the certain trouble that how can I use Flickr API option which is starts from "http://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key=".
I've tried to rewrite couple of codes in the jflickrfeed.js
Please let me fix it.
Thanks reading.
kenydo
with another classic upload it working... can you help me ?
Ross W
All I need is to know how to retrieve the images in the correct order. My flickr sets have around 60 images each, so the code retrieves 20 of them but in a random order. Ideally I would like it to select the first 20 images from my flickr set or to select them by date or any kind of order, just not random.
Please help if you can, I am a bit behind the deadline with this one already.
Thanks!! :)
Adam
Taylor
http://italktoomuch.com/2011/12/flickr-powered-slideshows-with-jquery/
Duncan
Using an API call such as http://www.flickr.com/services/api/flickr.photosets.getPhotos.htm you can retrieve a full list of photos from a photoset, but the output requires further simple processing to form a url - you can try it with the API explorer here http://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
Amber
Is there an autoplay or force play code that I can implement so it knows when it is open, or any other solution?
Asif
I have made necessary changes in both the jflickfeed.js
flickrbase: 'http://api.flickr.com/services/feeds/',
feedapi: 'groups_pool.gne'
and in setup.js with the id of group Brisbane.
Could you tell me how I can show group photos using colorbox.
Julie
cindy
Mike
http://gnypac.com/example
That is pulling the latest uploads but what I would like to do is make them all uniform size (fixed height) and then display them all on a single row with a sliding bar. Any help would be appreciated.
Mike
http://www.flickr.com/services/api/misc.urls.html
Just working on properly integrating it into my site now.
olimax
add this into the settings:
shownum: 3,
just before:
$.each(data.items, function(i,item){
add this:
var theitems = data.items;
for (var n = 0; n < theitems.length - 1; n )
{
var k = n Math.floor(Math.random() * (theitems.length - n));
var temp = theitems[k];
theitems[k] = theitems[n];
theitems[n] = temp;
data.items = theitems;
}
and change this:
if(i < settings.limit){
to this
if(i < settings.shownum){
Andrew
Any ideas?
I wasn't sure if something could be interfering. I do have jquery easing for my vertical scrolling, a slider and a horizontal accordion. I have light box working with it all but cant seem to get color box.
Any ideas on how to implement it into light box?
Thanks
Amit
I want to create my custom size thumbnail. Please help.
Jon Schwab
jim
Any help would be great :)
mrto2
Kristalin Chavdarov
-----------------------------------------
To get the a random selection from the first 20
add this into the settings:
shownum: 3,
just before:
$.each(data.items, function(i,item){
add this:
var theitems = data.items;
for (var n = 0; n < theitems.length - 1; n ) {
var k = Math.round(Math.random() * (theitems.length - 1));
var randomiser = Math.floor(Math.random()*20);
var temp = theitems[k];
theitems[k] = theitems[n];
theitems[n] = temp;
data.items = theitems;
}
and change this:
if(i < settings.limit){
to this
if(i < settings.shownum){
Brennen
http://gyazo.com/6fa4510734887cc200b37fda5137004c
Image of code-
Brennen
jesse
Marco van Zomeren
http://thereforeiam.be/experimenting/with_flickr_and_photoswipe/
zir
thank you
Alec
Richard Dale
If you could help out I'd be very grateful.
Mike
Trying to use the plugin and having a hard time setting it up. I've got my Flickr ID and I've downloaded the plugin and have it hosted with my webhost in my root html folder.
I'm trying to figure how and where to include code. I'm trying to use the colorbox plugin part.
Any code go in the body? What in the head?
I'm sorry for such a noob question. Ive read the comments here and see in the demo that there's what looks like javascript code but where is that supposed to be located?
Thanks so much
David Rousseau
Somedude
dhaval
I have just started new (public) group and tried to retrieve images to my website via jflickrfeed.min plugin changed photos_public.gne to groups_pool.gne.
But still the images are not coming.
Instead my personal profile images are working perfectly.
My question is :
Is there any rule that for new group one has to wait for some hours/day to start this photo feedings?
RyanKivi
Regards,
RKivi
Jeffery
That is the very first time I frequented your website page and thus far?
I surprised with the analysis you made to create this actual put up amazing.
Great process!
プラダ 財布
are a perfect illustration of this. If you've no idea about whether a pair of boots you want are real or otherwise not, it's advisable not to purchase them.
Delicately wipe it using a damp material, will not brush
it fiercely that has a brush, don't melt away the sneakers with boiled water, and use washing detergent and alkaline cleaning fluid to clean it with the same time.
Leave a Comment