You are almost there with the code you have. The two main issues are that you are trying to create a carousel in a div with id carousel
but no such div exists. The other issue you'll run into, once you fix that, is the carousel needs to wait for the flicker library to load the images before creating a carousel. Thus, you can remove the block of code that says
// Special carousel stuff to make the
// showcase look spiffy
//
$("#carousel").waterwheelCarousel({
speed: 300,
linkHandling: 2,
flankingItems: 4
});
and move it into the jflickerfeed creation as a callback. You'll also have to modify the image template to remove the li
's. Finally, you have to remove the position attribute from the div which is added by the carousel plugin since otherwise the div has a height of 0 and you can't see anything. Thus, the full call to jflickerfeed in displayContent
is here:
// Now we do our magic with the
// jFlickrFeed plugin
//
$('#' + tabName).jflickrfeed({
limit: 20,
qstrings: {
set: photoSet,
nsid: '85496792@N03'
},
itemTemplate: '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>'
}, function () {
// Special carousel stuff to make the
// showcase look spiffy
//
$('#' + tabName).waterwheelCarousel({
speed: 300,
linkHandling: 2,
flankingItems: 4
}).css('position', '');
});
Let me know if you have any questions. A copy of the full working HTML is here.