jFlickrFeed Plugin by Joel Sutherland

This plugin makes it easy to pull Flickr feeds and display them on your site. Below are some examples that can get you thinking about its possiblities.

Disclaimer: I did not develop this plug-in, I merely created a variant of it so I could show photosets. The photos in this demo are also not taken by me and are for demonstation purposes only.

Basic Use

The photos below are being pulled from Flickr using the jFlickrFeed plugin. Here is the code that is being used:

$('#basicuse').jflickrfeed({
	limit: 14,
	qstrings: {
		set: '72157624900621129',
		nsid: '[email protected]'
	},
	itemTemplate: 
	'<li>' +
		'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
	'</li>'
});

Use with ColorBox

We can use the callback to apply the colorbox plugin after the photos are loaded.

$('#cbox').jflickrfeed({
	limit: 14,
	qstrings: {
    	set: '72157624900621129',
		nsid: '[email protected]'
	},
    cleanDescription: true,
	itemTemplate:
	'<li>' +
		'<a rel="colorbox" href="{{image_b}}" title="{{title}}">' +
			'<img src="{{image_s}}" alt="{{title}}" />' +
		'</a>' +
	'</li>'
}, function(data) {
	$('#cbox a').colorbox();
});
			

Use with Cycle

Here is an example of how we can tweak the templates and make it work great with jQuery Cycle.

$('#cycle').jflickrfeed({
	limit: 14,
	qstrings: {
		set: '72157624900621129',
		nsid: '[email protected]'
	},
	itemTemplate: '<li><img src="{{image}}" alt="" /><div>{{title}}</div></li>'
}, function(data) {
	$('#cycle div').hide();
	$('#cycle').cycle({
		timeout: 5000
	});
	$('#cycle li').hover(function(){
		$(this).children('div').show();
	},function(){
		$(this).children('div').hide();
	});
});
	

Use Without Templates

It is also possible to use the plugin without the templating. Instead it would be useful to use the individual item callback:

$('#nocallback').jflickrfeed({
	limit: 4,
	qstrings: {
		set: '72157624900621129',
		nsid: '[email protected]'
	},
	useTemplate: false,
	itemCallback: function(item){
		$(this).append("<li><img src='" + item.image_m + "' alt=''/></li>");
	}
});

Download

Download the demo and all the files required to make it work.