Question

我想做什么？

我正在尝试将三个组件合并为一个，以展示我的客户的工作。这三个组成部分包括以下内容：

有什么问题？

图像不是以水车转盘的形式显示，而是以平铺的布局显示。

我做了什么？

我已经提到了所有上述插件/组件的作者提供的API。
我能够将jFlickrFeed插件和手风琴结合起来，没有任何问题（如下所示）。

Screenshot of showcase

我有一种直觉，认为问题出在CSS的某处或HTML的布局方式。例如，我有当前的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>

最初我认为<div id="carousel"></div>会简单地使用class="thumbs"围绕每个div，但事情就会出错 - 因为格式化拼贴列表完全搞砸了（虽然这不是完全是个问题）。请参阅this link和HTML部分，了解我的意思。我可能在该部分周围有太多标签，tabs和thumbs div标签可能会丢弃。

jflickrfeed插件中还有一个名为itemTemplate的有趣选项。

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

我已经对这一部分进行了相当多的尝试，但似乎没有任何工作正常（再一次，图像的平铺布局保持不变，图像没有以旋转木马的形式格式化）。虽然我非常怀疑这是问题所在，因为如果没有创建多个轮播实例，就没有办法将<div id="carousel"></div>放在那里。

我提供了什么：

最终，这就是我想要的结果......

Final draft of showcase

Answer 1

您的代码几乎就在那里。两个主要问题是您尝试在ID为carousel的div中创建轮播，但不存在此类div。一旦你解决了这个问题，你将遇到的另一个问题是，旋转木马需要等待闪烁库在创建旋转木马之前加载图像。因此，您可以删除显示

的代码块

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

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

并将其作为回调移动到jflickerfeed创建中。您还必须修改图像模板以删除li。最后，你必须从carousel插件添加的div中删除position属性，否则div的高度为0，你看不到任何东西。因此，displayContent中对jflickerfeed的完整调用就在这里：

// 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的副本为here。

结合手风琴，jFlickerFeed插件和水车图像轮播

1 个答案: