0

FlexSlider を使用してスライダーを構築しようとします。スライダー内の画像は、Fancybox で「onclick」で表示する必要があります。

今のところ私のコード：

$(".slides li").fancybox();

$('#flex1').flexslider({
   animation: "slide",
   animationLoop: false,
   itemWidth: 179,
   itemMargin: 0,
   minItems: 4,
   maxItems: 4,
   controlNav: false, 
   pauseOnHover: true,
   slideshowSpeed: 5000,
   keyboardNav: true,
   slideshow: false,
});

ドキュメント準備中

HTML / PHP は次のようになります。

<div class="flexslider" id="flex1">
    <ul class="slides home_single_item">
       <?php 
            $handle=opendir ("pics/");
            $i=0;
            while ($datei = readdir ($handle)) {
                $i++;
                if($datei != "." && $datei != ".."){
                    echo '<li>';
                    echo '<img class="fancybox" src="pics/'.$datei.'" width="179px" height="224px" />';
                    echo '</li>';
                }
            }

            closedir($handle);
        ?>
    </ul>
</div>

画像をクリックすると、小さな画像として表示され、ギャラリー リストから消えます。Flexslider と Fancybox の間に既知の問題はありますか? 誰にも解決策がありますか？

ありがとう ;）

4

1 に答える 1

1

紛争などはありません。

あなたがしていることは、fancyboxをリスト要素 にバインドすることです

$(".slides li").fancybox();

...したがって fancybox はli(imgタグ) のコンテンツをボックスに移動します。imgタグにこれらのプロパティがあるため:

width="179px" height="224px"

... ファンシーボックスでは画像が小さいです。

この時点で、fancybox はコンテンツをコンテンツとして処理してinlineいるためimg、css プロパティで fancybox を閉じた後にタグが返されますdisplay: none;(これは予期される動作です)。

あなたがしなければならないことは、あなたのphpのこの部分を変更し、a次のようにfancyboxで開く画像をターゲットにするタグを追加することです: 

if($datei != "." && $datei != ".."){
    echo '<li>';
    echo '<a href="pics/'.$datei.'" class="fancybox">';
    echo '<img src="pics/'.$datei.'" width="179px" height="224px" />';
    echo '</a>';
    echo '</li>';
}

...を タグからタグ に移動したことに注意してください。次に、次のようにスクリプト内のそのタグに fancybox をバインドします。 class="fancybox"imgaa

$(".slides a").fancybox();

またはそれ以上

$(".slides a.fancybox").fancybox();

またははるかにシンプルで優れています

$("a.fancybox").fancybox();
于 2013-01-09T22:46:14.937 に答える