Combining an accordion, jFlickerFeed plugin, and waterwheel image carousel

Question

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:

• Accordion with folder tabs
• jFlickerFeed plugin
• Waterwheel image carousel

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?

1. I have referred to the API provided by the authors of all the aforementioned plugins/components.
2. 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&ntilde;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...

Answer 1

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.