Chargement de contenu en ligne à l’aide de FancyBox

Eh bien, j’écris simplement ce post pour aider d’autres personnes qui pourraient rencontrer le même problème.

Les exemples sur le site Web du fournisseur sont un peu vagues et j’avais supposé le scénario suivant.

Vous avez un lien avec un href n vers un #id de contenu.

 Open Example

Et vous avez une div pour tenir ce contenu.

 Some content here

Ensuite, il vous suffit de lancer Fancybox via un 1-liner.

 $(".fancybox").fancybox();

Naturellement , vous penseriez que Fancybox copiera le contenu et modifiera l’ display: none à display: block et tout ira bien.

Mais cela n’arrive pas.
Il charge toujours le contenu mais le contenu est caché et vous avez une Fancybox vierge. *cry*

La solution est très simple, mais il m’a fallu environ deux heures et demie de cheveux pour la trouver.

Enveloppez simplement votre contenu avec un div (redondant) display: none et Bob est votre oncle.

  Some content here

Voila

La façon dont j’ai compris cela passait par l’exemple index.html / style.css fourni avec l’installation Fancybox.

Si vous visualisez le code utilisé pour le site Web de démonstration et que vous copiez / collez essentiellement, vous irez bien.

Pour faire fonctionner une Fancybox intégrée, vous devez avoir ce code dans votre fichier index.html:

          Name of Link Here   Write whatever text you want right here!!

N'oubliez pas de préciser les dossiers dans lesquels vos fichiers de script sont placés et où vous pointez dans la balise Head; ils doivent correspondre.

Juste quelque chose que j’ai trouvé pour les utilisateurs de WordPress,

Aussi évident que cela puisse paraître, si votre div retourne du contenu AJAX basé par exemple sur un en-tête communément associé à une nouvelle page de post, certains didacticiels indiqueront que le résultat est faux puisque vous retournez les données de publication sur la même page et le retour empêcherait la page de bouger. Cependant, si vous retournez false, vous empêchez également Fancybox2 de faire son travail. J’ai passé des heures à essayer de comprendre cette chose simple et stupide.

Donc, pour ce type de liens, assurez-vous simplement que la propriété href est la div hachée (#) que vous souhaitez sélectionner, et dans votre javascript, assurez-vous que vous ne renvoyez pas false car vous n’en aurez plus besoin.

Simple je sais ^ _ ^