0

我是在韩国学习网页设计的学生。
我有个问题。我在我的个人项目中使用了 fancybox。
这很棒！！但是，我有一个问题..

主页就是这样简单构建的

目录
Fancybox 图像 slide1
目录
Fancybox 图像 silde2

重要的是 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

花式盒子使用 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 回答