Fancybox2: modification de l’appel pour plusieurs galeries

Je génère une page HTML contenant plusieurs galeries à partir d’informations contenues dans une firebase database MySQL et je dois modifier l’appel Fancybox2 comme suit

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

Comment puis-je append les références d’élément à l’appel? C’est-à-dire que je dois append un nombre variable de a[rel=XXX] à l’appel.

Est-ce que je crée une variable avec les valeurs et la référence dans l’appel? Si tel est le cas, je ne suis pas sûr de la syntaxe et apprécierais un exemple.

Vous pouvez utiliser un seul script tel que:

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

Ensuite, lorsque vous créez vos galeries, ajoutez simplement un rel différent pour chaque galerie mais le même class="fancybox" , par exemple:

  image 01 image 02 image 03  image 04 image 05 image 06

Lorsque vous cliquez sur une image (image 01 par exemple), la galerie (Fancybox) affiche uniquement les éléments ayant le même rel (images 02 et 03 comme dans l’exemple ci-dessus + bien sûr, l’image 01)

Avec fancybox v2.x, vous n’avez pas besoin d’utiliser jQuery live() comme suggéré par @sczizzo car fancybox v2.x prend déjà en charge les éléments existants et les éléments ajoutés dynamicment.

Une dernière remarque : n’utilisez pas d’identifiant pour plus d’un élément. Les identifiants doivent être uniques et vous ne devez pas utiliser le même identifiant deux fois ou plus dans le même document HTML. Consultez http://fancyapps.com/fancybox/#support FAQ’s No.6 pour plus d’informations.

Pourquoi n’appelez-vous pas fancybox() plusieurs fois? Vous pouvez enregistrer les options que vous avez passées et les utiliser plus tard.

D’autre part, vous pouvez également utiliser une classe au lieu des sélecteurs a a[rel=XYZ] , ce que je ferais:

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

Si le contenu est chargé de manière dynamic (par exemple via Ajax), vous pouvez faire quelque chose de similaire en utilisant live() de jQuery.