javascript - 花式盒子2 : Amending call for multiple galleries

Question

我正在从 MySQL 数据库中保存的信息生成一个包含多个画廊的 HTML 页面，我需要按如下方式修改 Fancybox2 调用

$(document).ready(function() {
    $("a[rel=gall24],a[rel=gall30], etc, etc etc").fancybox({ ... });
});

如何将元素引用添加到调用中？也就是说，我需要在调用中添加可变数量的 a[rel=XXX]。

我是否创建一个变量并在调用中引用它的值？如果是这样，我不确定语法，希望能举个例子。

Answer 1

您可以使用单个脚本，例如:

$(document).ready(function() {
    $("a.fancybox").fancybox();
});

然后，当您创建画廊时，只需为每个画廊添加不同的 rel 属性，但添加相同的 class="fancybox"，例如:

<!--gallery 01 -->
<a class="fancybox" href="images/01.jpg" rel="gallery01">image 01</a>
<a class="fancybox" href="images/02.jpg" rel="gallery01">image 02</a>
<a class="fancybox" href="images/03.jpg" rel="gallery01">image 03</a>

<!--gallery 02 -->
<a class="fancybox" href="images/04.jpg" rel="gallery02">image 04</a>
<a class="fancybox" href="images/05.jpg" rel="gallery02">image 05</a>
<a class="fancybox" href="images/06.jpg" rel="gallery02">image 06</a>

当您单击任何图像(例如图像 01)时，它会在 (Fancybox) 画廊中仅显示那些具有相同 rel 属性的元素(如上例所示的图像 02 和 03 +当然是图片 01)

使用 fancybox v2.x，你不需要像@sczizzo 建议的那样使用 jQuery live()，因为 fancybox v2.x 已经支持现有的和动态添加的元素

最后一点:不要将 ID 用于多个元素。 ID 应该是唯一的，你不应该在同一个 html 文档中使用相同的 ID 两次或更多次。检查http://fancyapps.com/fancybox/#support更多常见问题解答No.6