web-dev-qa-db-fra.com

Chargement de contenu en ligne à l'aide de FancyBox

J'écris simplement ce billet pour aider, espérons-le, d'autres personnes qui pourraient être confrontées au même problème.

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

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

<a href="#content-div" class="fancybox">Open Example</a>

Et vous avez une div pour tenir ce contenu.

<div id="content-div" style="display: none">Some content here</div>

Ensuite, vous exécutez simplement Fancybox à travers une ligne.

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

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

Mais cela n'arrive pas.
Il charge toujours le contenu, mais le contenu est masqué et vous avez une Fancybox vide. *cry*

jqueryhtmlcssfancybox
68
Marko

La solution est très simple, mais il m'a fallu environ 2 heures et demie les cheveux sur la tête pour les trouver.

Simplement encapsule votre contenu avec un (redondant) div qui a display: none et Bob est votre oncle.

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

Voila

122
Marko

La façon dont j'ai compris que cela se passait dans l'exemple index.html/style.css fourni avec l'installation de Fancybox.

Si vous affichez le code utilisé pour le site Web de démonstration et que vous copiez/collez, tout ira bien.

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

  <head>
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#various1").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
    });
    </script>
  </head>

 <body>

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
    <div style="display: none;">
        <div id="inline1" style="width:400px;height:100px;overflow:auto;">
                   Write whatever text you want right here!!
        </div>
    </div> 

</body>

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

8
tandy

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

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

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

Simple je sais ^ _ ^

2
Jamaal Okeen Ephriam