jFlickrFeed Plugin Examples

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: '44802888@N04'
	},
	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: '37304598@N02'
	},
	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: '37304598@N02'
	},
	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: '37304598@N02'
	},
	useTemplate: false,
	itemCallback: function(item){
		$(this).append("<li><img src='" + item.image_m + "' alt=''/></li>");
	}
});