2

Fancybox 2 を使用して、Web サイトhttp://fancyapps.com/fancyboxの例を使用して画像ギャラリーを作成しました。

「display: none;」を使用して、最初の画像を除くすべての画像を非表示にしています。

HTML

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
</div>

CSS

.hidden {
    display: none;
}

JS

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });

クリックしてギャラリーを開くと、最初の画像を非表示にして、ギャラリーが2番目の画像を開くようにします。どうやってやるの？

ありがとう。

4

2 に答える 2

6

最初の画像が fancybox ギャラリーに含まれない場合はfancybox、fancybox ギャラリーのみを起動するために使用されるため、クラスを持つ必要はありません。

別のクラスを使用できます（例fancyboxLauncher）

<a class="fancyboxLauncher" href="http://fancyapps.com/fancybox/demo/1_b.jpg" title="one"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

click...そして、次のようにイベントをバインドします:

$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});

...メソッドを使用して最初のアイテムからギャラリーを起動したことに注意してください。それ以外の場合は、最後のアイテムから開始されます。また、 jQuery v1.7+ が必要な.eq(0)ことにも注意してください.on()

ファンシーボックスギャラリーにはこのコードが必要です

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    padding: 0
});

さらに、fancybox ギャラリーの画像が非表示になる場合、実際にはサムネイル (imgタグ) は必要ありません。そうしないと、ページの読み込みに不必要なオーバーヘッドが追加されるだけです。

<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
</div>

JSFIDDLEをチェック

于 2013-06-24T18:05:15.337 に答える
1

誰かが別の答えを探している場合は、次のようにすることができます。

<a class="fancybox" rel="group1" href="images/second-image.jpg">
  <img src="images/first-image.jpg" />
</a>
<!-- clicking on the above image will open second-image.jpg in the fancybox,
     though first-image.jpg is shown as the thumbnail. -->
<a class="fancybox" rel="group1" href="images/third-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/fourth-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/and-so-on.jpg"></a>

この方法では、余分な CSS (非表示にするため) や jquery (トリガーするため) を書く必要はありません。

于 2015-05-26T06:34:45.743 に答える