Fancybox2: changing numbers for multiple galleries

Question

I am creating an HTML page containing several galleries from the information stored in a MySQL database, and I need to make changes to the Fancybox2 call as follows

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

How to add links to an item to call? That is, I need to add the variable a[rel=XXX] to the call.

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

Answer 1

You can 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" , for example:

 <!--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 (for example, image 01), it displays in the gallery (Fancybox) only those elements with the same rel attribute (images 02 and 03, as, for example, in the example above + image 01)

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

Last note : do not use an identifier for more than one element. The identifier must be unique and you must not use the same identifier twice or more times in the same html document. Check out the http://fancyapps.com/fancybox/#support FAQ # 6 for more

Answer 2

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

On the other hand, you can also use the class instead of the a[rel=XYZ] selectors, which I will do:

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

If the content is loaded dynamically (e.g. via Ajax), you can do something similar using jQuery live() .