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.
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: '7375559@N02' }, 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: { set: '72157624900621129', nsid: '7375559@N02' }, 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(); });
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: '7375559@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: { set: '72157624900621129', nsid: '7375559@N02' }, useTemplate: false, itemCallback: function(item){ $(this).append("<li><img src='" + item.image_m + "' alt=''/></li>"); } });
Download the demo and all the files required to make it work.