0

私は flexslider と fancybox を何度も使用してきましたが、どちらも優れたプラグインです。これとは別に、これらは両方とも私がやっているサイトではうまく機能しますが、これから説明する問題は、flexslider ギャラリーが fancybox div 内に配置されている場合に発生します。これはレスポンシブ Web サイトであるため、静的な幅はなく、すべての幅はパーセンテージ ベースです。

最初は、すべてが機能しているように見えます。fancybox と flexslider ディスプレイを必要に応じて読み込みます。その幅は fancybox コンテナーの 50% です。しかしdisplay: none;、呼び出されるまでdivを非表示にする必要があるfancybox divに追加すると、fancyboxがflexsliderのすべての画像をロードすると、flexslider divの幅は正しいですが、小さくなります。ページが読み込まれるとflexsliderが読み込まれるため、その幅がわからないと思います。これが、 が設定されている場合に発生しない理由display: none;です。

現在、2 つのプラグインをロードするための私の JavaScript は次のようになっています。

// =FANCYBOX

$(".fancybox").fancybox({
    padding : 2,
    nextEffect: 'fade',
    prevEffect: 'fade',
    title: false,
});

// =FLEXSLIDER 

$(function(){

    if($(".flexslider").length > 0) {
        $(".flexslider").addClass("loading");
        // Can also be used with $(document).ready()
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                directionNav: false,
                slideshowSpeed: 5000,
                animationSpeed: 360,
                easing: "easeInQuad",
                useCSS: false,
                start: function(slider){
                    $('.flexslider').removeClass('loading');
                }
            });
        });
    }
});

fancybox が表示された後に flexslider を強制的に初期化する方法を知っている人はいますか?

ありがとう、スティーブ

4

2 に答える 2

2

afterShow次のような fancybox のコールバック内で flexslider を初期化してみてください。

jQuery(document).ready(function($){
    $(".fancybox").fancybox({
        padding : 2,
        nextEffect: 'fade',
        prevEffect: 'fade',
        title: false,
        afterShow: function(){
            $('.flexslider').flexslider({
                // flexlslider options
            });
        }
    }); // fancybox
}); // ready
于 2013-10-29T22:20:28.180 に答える
0

display:none;flexslider が画像サイズを適切に判断できるように、fancyboxは避けるべきです。

このトリックはあなたを助けるかもしれません:

  1. ファンシーボックス div を親 div 内に配置します。

  2. visibility:hidden;fancybox div に設定します。

  3. display:none;親divに設定します。

それが役立つことを願っています。

于 2013-10-28T20:52:57.103 に答える