What am I trying to do?
I am attempting to combine three components into one to showcase my client's work. These three components include the following:
What is the problem?
The images are not displayed in the form of a waterwheel carousel, but rather in a tiled layout.
What have I done?
- I have referred to the API provided by the authors of all the aforementioned plugins/components.
- I was able to combine the jFlickrFeed plugin and accordion without a single problem (as shown below).

I have a gut feeling that the problem lies somewhere in the CSS or how the HTML is laid out. For example I have the current HTML...
<!-- Tabs -->
<ul id="tabs">
<li><a href="#" name="tab1">Glass Windows</a></li>
<li><a href="#" name="tab2">Lampshades</a></li>
<li><a href="#" name="tab3">Metal and Glass Sculptures</a></li>
<li><a href="#" name="tab4">Piñatas</a></li>
<li><a href="#" name="tab5">Wood Sculptures</a></li>
</ul>
<!-- Content in the accordion -->
<div id="content">
<div id="tab1" class="thumbs"></div>
<div id="tab2" class="thumbs"></div>
<div id="tab3" class="thumbs"></div>
<div id="tab4" class="thumbs"></div>
<div id="tab5" class="thumbs"></div>
</div>
Originally I thought that <div id="carousel"></div> would simply go around each of the divs with class="thumbs", but then things went awry - as in formatting of the tiled list was completely messed up (although this isn't exactly a problem). Refer to this link and the HTML section to see what I mean. I may have too many tags around that section and the tabs and thumbs div tag might be throwing things off.
There's also an interesting option available in the jflickrfeed plugin called itemTemplate.
itemTemplate:
'<li>' +
'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
'</li>'
I've experimented quite a bit with this section, but nothing seems to work properly (once again, the tiled layout of the images stays the same and the images are not formatted in the form of a carousel). Although I highly doubt this is where the problem lies since there's really no way to stick <div id="carousel"></div> in there without creating multiple instances of carousels.
What I've provided:
Ultimately, this is what I want to end up with...
