Fancybox2：修改多个画廊的调用 [英] Fancybox2: Amending call for multiple galleries

问题描述

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

< pre class =lang-js prettyprint-override> $（document）.ready（function（）{
$（a [rel = gall24]，a [rel = gall30]，等等，等等。）。fancybox（{...}）;
}）;


如何添加元素引用？也就是说，我需要在通话中添加一个可变数量 a [rel = XXX] 。

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

解决方案

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

  $（document）.ready（function（）{
 $（a.fancybox）。fancybox（）; 
}）; 
  

然后，当你创建画廊时，只需添加一个不同的 rel 每个图库的属性，但相同的 class =fancybox，例如：

 <！ -  gallery 01  - > 
< a class =fancyboxhref =images / 01.jpg =gallery01> image 01< / a> 
< a class =fancyboxhref =images / 02.jpg =gallery01> image 02< / a> 
< a class =fancyboxhref =images / 03.jpg =gallery01> image 03< / a> 
 
<！ -  gallery 02  - > 
< a class =fancyboxhref =images / 04.jpg =gallery02> image 04< / a> 
< a class =fancyboxhref =images / 05.jpg =gallery02> image 05< / a> 
< a class =fancyboxhref =images / 06.jpg =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号更多

I am generating an HTML page containing multiple galleries from information held in a MySQL database and I need to amend the Fancybox2 call as follows

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

How do I add the element references to the call? That is, I need to add a variable number of a[rel=XXX], to the call.

Do I create a variable with the values and reference that in the call? If so I am not sure of the syntax and would appreciate an example.

解决方案

You may use a single script like:

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

Then, when you create your galleries just add a different rel attribute for each gallery but the same class="fancybox", e.g.:

<!--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>

When you click on any image (image 01 for instance) it will show in the (Fancybox) gallery only those elements with the same rel attribute (image 02 and 03 as in the example above + image 01 of course)

With fancybox v2.x you don't need to use jQuery live() as suggested by @sczizzo since fancybox v2.x already supports both existing and dynamically added elements

One last note: don't use ID's for more than a single element. ID's should be unique and you shouldn't use the same ID twice or more times in the same html document. Check http://fancyapps.com/fancybox/#support FAQ's No.6 for more

这篇关于Fancybox2：修改多个画廊的调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！