jFlickrFeed Plugin

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.

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: {
		id: '[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: {
		id: '[email protected]'
	},
	itemTemplate:
	'<li>' +
		'<a rel="colorbox" href="{{image}}" 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: {
		id: '[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: {
		id: '[email protected]'
	},
	useTemplate: false,
	itemCallback: function(item){
		$(this).append("<li><img src='" + item.image_m + "' alt=''/></li>");
	}
});