Fancybox2:修改多个画廊的调用

时间:2011-12-29 16:37:21

标签: javascript jquery fancybox

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

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

如何添加对调用的元素引用?也就是说,我需要在调用中添加一个可变数量的a[rel=XXX]

我是否使用调用中的值和引用创建变量?如果是这样,我不确定语法,并希望得到一个例子。

2 个答案:

答案 0 :(得分:17)

您可以使用以下单个脚本:

$(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常见问题解答第6号了解更多

答案 1 :(得分:1)

为什么不多次拨打fancybox()?您可以保存传入的选项并在以后使用它们。

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

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

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