Geek Answers Handbook

Combination of accordion, jFlickerFeed plugin and water wheel image carousel

What am I trying to do?

I am trying to combine the three components into one to demonstrate the performance of my client. These three components include the following:

What is the problem?

Images are not displayed as a water wheel carousel, but rather as tiles.

What I've done?

  • I mentioned the API provided by the authors of all the above plugins / components.
  • I managed to combine the jFlickrFeed plugin and the accordion without a single problem (as shown below).

Screenshothot of showcase

I have a feeling that the problem lies somewhere in CSS or how the HTML is laid out. For example, I have 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>
Initially, I thought it <div id="carousel"></div>would just go around each of the divs class="thumbs", but then everything went wrong - as when formatting the tile list it was completely messed up (although this is not quite a problem), Check out this link and the HTML section to find out what I I mean. I may have too many tags around this section, and the tag tabsand thumbsdiv may drop everything.

In the jflickrfeed plugin, which is called itemTemplate, there is an interesting option.

itemTemplate: 
    '<li>' +
        '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
    '</li>'

, ( , , ). , , <div id="carousel"></div>, .

:

, , ...

Final draft of showcase

+4
1

, . : div id carousel, div . , , , - , , , . , ,

        // Special carousel stuff to make the
        // showcase look spiffy
        //

        $("#carousel").waterwheelCarousel({
            speed: 300,
            linkHandling: 2,
            flankingItems: 4
        });

jflickerfeed . , li. , position div, , div 0, . , jflickerfeed displayContent :

// 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', '');
});

, . HTML .

+1

More articles:


All Articles