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.
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>' });
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(); });
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(); }); });
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>"); } });