Chargement de contenu en ligne en utilisant FancyBox

Question

Eh bien, j'écris simplement ce message pour aider, espérons-le, les autres personnes qui pourraient rencontrer le même problème.

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

---

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

Ouvrir l'exemple

Et vous avez une div pour contenir ce contenu.

Un contenu ici

Ensuite, vous lancez simplement Fancybox avec une ligne.

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

Naturellement, vous pensez que Fancybox va copier le contenu et changer display: none en display: block et tout sera en ordre.

Mais cela ne se produit pas.
Il charge toujours le contenu mais le contenu est masqué et vous avez un Fancybox vide. *pleure*

Answer 1

La solution est très simple, mais cela m'a pris environ 2 heures et la moitié de mes cheveux pour la trouver.

Tout simplement envelopper votre contenu avec un (redondant) div qui a display: none et le tour est joué.

    Du contenu ici

Voilà

Answer 2

La façon dont j'ai trouvé cela était en passant par l'exemple index.html/style.css qui est fourni avec l'installation de Fancybox.

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

Pour faire fonctionner un Fancybox en ligne, vous devez avoir ce code présent dans votre fichier index.html :

    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');

    $(document).ready(function() {

    $("#various1").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
    });

    Nom du lien ici

                   Ecrivez n'importe quel texte ici!!

N'oubliez pas d'être précis sur les dossiers dans lesquels vos fichiers de script sont placés et vers lesquels vous pointez dans la balise Head ; ils doivent correspondre.

Answer 3

Juste quelque chose que j'ai trouvé pour les utilisateurs de Wordpress,

Aussi évident que cela puisse paraître, si votre div renvoie un contenu AJAX basé par exemple sur un en-tête qui renverrait généralement à une nouvelle page de publication, certains tutoriels vous diront de renvoyer false car vous renvoyez les données de publication sur la même page et le retour empêcherait la page de se déplacer. Cependant, si vous renvoyez false, vous empêchez également Fancybox2 de fonctionner comme il se doit. J'ai passé des heures à essayer de comprendre cette chose stupide et simple.

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

Simple, je sais ^_^