Comment utiliser Fancybox avec des éléments ajoutés dynamiquement ?

Liaison de Fancybox aux éléments ajoutés dynamiquement

Vous pouvez rencontrer des problèmes en utilisant Fancybox v1.3.4 avec des éléments ajoutés dynamiquement au document. En effet, Fancybox se lie uniquement aux éléments statiques.

Solution :

Étape 1 : Mise à niveau vers jQuery v1.7.x

Cette version inclut la méthode .on() qui vous permet de lier des événements à des éléments ajoutés dynamiquement.

Étape 2 : Utilisez .on() et le focusin Event

Liez la méthode .on() à l'élément parent de vos éléments fancybox. L'événement focusin est utilisé pour garantir que Fancybox se lie uniquement aux éléments situés dans le focus du conteneur parent.

Par exemple, si vos éléments Fancybox ont la classe "ajaxFancyBox" et se trouvent dans un conteneur avec l'identifiant "conteneur " :

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Set your Fancybox options here
  });
});

Cette méthode prend également en charge la spécification de différentes options Fancybox pour différents types de contenu :

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Ajax options
  });

  $("a.iframeFancyBox").fancybox({
    // Iframe options
  });
});

Remarque importante pour Chrome :

Dans Chrome, l'ajout d'attributs tabindex à tous les éléments liés à Fancybox est nécessaire pour faire fonctionner la méthode on() :

<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">...</a>
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">...</a>

Cette solution fonctionne à la fois pour ajouter du nouveau contenu et pour remplacer du contenu existant. Assurez-vous que le nouveau contenu est ajouté dans le conteneur où la méthode .on() est appliquée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!