I found a jquery plugin that puts your Flickr public feed into your website. Shoutout to the developers of this fine plugin!
Now let’s get straight to the code:
This is how you call the plugin:
$('#gallery').jflickrfeed({
limit: 14,
qstrings: {
set: '72157624900621129',
nsid: '7375559@N02'
},
itemTemplate:
'<li>' +
'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
'</li>'
});
Where set is the set id that Flickr assigns to each photoset you create . . . to get this number, simply go to your Flickr homepage and click on a photoset. Once you are looking at your photoset, the URL should look like this – http://www.flickr.com/photos/USER/sets/############/ – the numeric digits at the end of this URL is the set id. The nsid parameter is your Flickr ID, it is a bit tricky to get this information but go to this page and it should show you your Flickr ID.
You can bundle this with jquery Cycle for slideshow presentation or with jquery Colorbox for a nice photo gallery. Here is a more in-depth demonstration with code samples.
Plugin Options
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.
Template
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.
Image Sizes
The letter suffixes are as follows: (ie {{image_b}} where the image size returned is 1024px wide/tall)
- s small square 75×75
- q large square 150×150
- t thumbnail, 100 on longest side
- m small, 240 on longest side
- n small, 320 on longest side
- – medium, 500 on longest side
- z medium 640, 640 on longest side
- c medium 800, 800 on longest side†
- b large, 1024 on longest side*
- o original image, either a jpg, gif or png, depending on source format
* Before May 25th 2010 large photos only exist for very large original images.
† Medium 800 photos only exist after March 1st 2012.
The Callback Parameter
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();
});
