fanybox2:修改多个画廊的呼吁

Fancybox2: Amending call for multiple galleries

本文关键字：修改 fanybox2      更新时间：2023-09-26

我正在生成一个HTML页面，其中包含来自MySQL数据库中保存的信息的多个画廊，我需要修改Fancybox2调用，如下所示

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

如何将元素引用添加到调用中?也就是说，我需要在呼叫中添加一个可变号码a[rel=XXX]。

我创建一个变量的值和引用，在调用?如果是这样，我不确定语法，希望能提供一个示例。

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

$(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你不需要使用jQuery live()的建议@sczizzo自从fancybox v2。X已经支持现有元素和动态添加的元素

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

你为什么不多次调用fancybox()呢?你可以保存传入的选项，以后再使用。

另一方面，您也可以使用类而不是a[rel=XYZ]选择器，这就是我要做的:

$('a.gallery').fancybox({ ... });

如果内容是动态加载的(例如通过Ajax)，你可以使用jQuery的live()做类似的事情。

相关文章：