1

FancyboxとScrollingCarouselを使用しています。
作成してみてください：$(.subject) Fancyboxをクリック>表示$(.content)>$(.content)スクロール使用scrollingCarousel。

私はテスト作業を別々にうまくやりました。

しかし、それらをまとめると（Demo1）。
なぜscrollingCarousel$(.content)をロードしないのですか？
（ただし、ページをリロードする場合$(.content)は、scrollingCarouselが機能します。）

だから私はFancyboxコールバック（Demo2）afterLoad、beforeLoad、beforeShowで書き込もうとしました...私もテストしましたが、それでも機能しません。

（他のカルーセルプラグインもテストしましたが、同じ問題です。）

デモ1jsfiddle

 $(".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;
}​

アドバイスや助けをいただければ幸いです。

4

2 に答える 2

2

.contentはCSSによって非表示になっているため、スクローラーを呼び出す前にをdisplay: none使用して表示する必要があります。そうしないと、非表示のままになります。.show()

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

$(".subjectlist").fancybox({
    afterLoad: function() {
        $('.content').show().scrollingCarousel({
            scrollerAlignment: 'vertical'
        });
    }
});​
于 2012-11-09T16:20:55.487 に答える
0

こんにちは、フクロウのカルーセル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>

これがお役に立てば幸いです。

于 2017-03-23T18:39:04.517 に答える