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.
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.
Share Improve this question edited Dec 29, 2011 at 17:37 sczizzo 3,20621 silver badges28 bronze badges asked Dec 29, 2011 at 16:37 mclmcl 6912 gold badges10 silver badges23 bronze badges2 Answers
Reset to default 19You 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
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().