0

私は韓国でウェブデザインを勉強している学生です。
質問があります。私は自分の個人的なプロジェクトで fancybox を使用しています。
それは素晴らしいです！！しかし、私には問題があります..

ホームページはそんな感じでシンプルに構成されています

内容
Fancybox 画像 スライド1
内容
Fancybox 画像 スライド2

重要なのは、slide1 で、slide2 は関係ありません。
ただし、slide1 の小さな画像をクリックすると、fancybox は、slide1 と slide2 の画像を含むすべての画像を表示します。
「Fancybox image slide1」で、slide1 の画像だけを表示したい。

私を助けてください！！簡単な HTML ソースを添付します。ありがとうございました！

<script>
$(document).ready(function() {
       $('.fancybox').fancybox();
});
</script>

<body>
   contents<br>
   <div class="fancybox_image_slide1">
   <a class="fancybox" rel="group" href="1_b.jpg"><img src="1_s.jpg"/></a>
   <a class="fancybox" rel="group" href="2_b.jpg" ><img src="2_s.jpg"/></a>
</div>
contents<br>   
<div class="fancybox_image_slide2" >
   <a class="fancybox" rel="group" href="3_b.jpg"><img src="3_s.jpg" /></a>
   <a class="fancybox" rel="group" href="4_b.jpg" ><img src="4_s.jpg"/></a>
</div>
</body>
4

1 に答える 1

2

Fancy box は rel 属性を使用してグループ化を処理します。各グループの rel 属性の値が一致していることを確認してください。

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
});
</script>

<body>
contents<br>
<div class="fancybox_image_slide1">
   <a class="fancybox" rel="slide1" href="1_b.jpg"><img src="1_s.jpg"/></a>
   <a class="fancybox" rel="slide1" href="2_b.jpg" ><img src="2_s.jpg"/></a>
</div>
contents<br>   
<div class="fancybox_image_slide2" >
   <a class="fancybox" rel="slide2" href="3_b.jpg"><img src="3_s.jpg" /></a>
   <a class="fancybox" rel="slide2" href="4_b.jpg" ><img src="4_s.jpg"/></a>
</div>
</body>
于 2012-12-06T16:31:42.797 に答える