javascript - 在 Twitter Bootstrap 选项卡中使用多个图片库

Question

我已经根据 SlidesJS 创建了 3 个图片库并将它们放在 Twitter Bootstrap Tabs 中.

你可以看到 demo在这里。

如您所见，画廊已正确填充并放置在选项卡内；但是，第二个和第三个画廊的图像不会显示。

我猜这可能是因为选项卡的内容被隐藏并且与图库 CSS 冲突？

你有什么解决办法吗？

答案:

根据下面的建议，我最终以这种方式使用它:

$(document).ready(function(){
    $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
    $("#gallery-tab a").each(function( index ) {
        $(this).on('shown', function(){
            $('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
        });
    });
});      

Answer 1

大多数选项卡场景的最常见问题是，当选项卡隐藏时，您正在初始化画廊，因此插件无法计算大小，也无法对不可见的选项卡子元素执行其他操作。

您可以 1) 在选项卡选择上初始化图库插件，或 2) 使用类似 {position: absolute; left: -999em; 而不是 {display: none} 来隐藏标签。

更新:根据您的评论，这应该可行...

$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
   $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})