javascript - 如何让 Fancybox 与 carousel 插件一起使用？

Question

我使用 Fancybox 和 Scrolling Carousel .
尝试制作:点击 $(.subject) 进入 Fancybox > show $(.content) > $(.content) 滚动使用 scrollingCarousel。

我单独做了测试工作正常。

但是如果我把它们放在一起(Demo1)。
为什么 $(.content) 不会加载滚动轮播？
(但如果重新加载 $(.content) 页面，则 scrollingCarousel 工作。)

所以我尝试在Fancybox回调(Demo2)中写afterLoad,beforeLoad,beforeShow...我也测试了，还是不行。

(我测试过其他轮播插件，同样的问题。)

演示 1 jsfiddle

 $(".subject").fancybox({});
 $('.content').scrollingCarousel({});

演示 2

 $(".subject").fancybox({
     afterLoad: function(){
        $('.content').scrollingCarousel({});
     }
 });

HTML:

<div class="subject">
    <div>
        <a class="subjectlist"rel="1" href="#1">
            <img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg">
        </a>
    </div>
</div>
<div class="content" id="1">
    <div><img class="" src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"></div>
    <div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"></div>
    <div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg"></div>
</div>​

CSS

.content{
    display:none;
    width: 200px;
    height: 200px;
}
.content img{
    width: 200px;
    height: 200px;
}​

如有任何建议或帮助，我们将不胜感激。

Answer 1

.content 被你的 CSS 使用 display: none 隐藏，所以你只需在调用之前使用 .show() 显示它滚动条，否则它只会保持隐藏状态。

http://jsfiddle.net/6VH7w/3/

$(".subjectlist").fancybox({
    afterLoad: function() {
        $('.content').show().scrollingCarousel({
            scrollerAlignment: 'vertical'
        });
    }
});​