Fancybox2: Amending call for multiple galleries

问题

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.

回答1:

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

回答2:

Why don't you just call fancybox() multiple times? You can save the options you pass in and use them later.

On the other hand, you might also use a class instead of the a[rel=XYZ] selectors, which is what I would do:

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

If the content is being loaded in dynamically (e.g. via Ajax), you might do something similar using jQuery's live().

来源：https://stackoverflow.com/questions/8670555/fancybox2-amending-call-for-multiple-galleries

标签

javascript

jquery

fancybox