Question

我使用Fancybox和Scrolling Carousel 尝试制作：点击$(.subject)进入Fancybox＆gt;显示$(.content)＆gt; $(.content)滚动使用scrollingCarousel。

我把测试工作分开了。

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

所以我尝试在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

您的CSS会使用.content隐藏

display: none，因此您只需在调用滚动条之前使用.show()显示它，否则它将保持隐藏状态。

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

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

Answer 2

Hellow我制作了猫头鹰旋转木马2和fancybox，添加了fancybox css，mousewheel和js文件。然后我制作了我的物品

<div class="owl-carousel owl-theme">
   <div class="item">
       <a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
   </div>
   <div class="item">
       <a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
   </div>
</div>

我希望这对你有所帮助。

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

2 个答案: