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