Laden von Inline-Inhalten mit FancyBox

Question 1

Nun, ich schreibe einfach diesen Beitrag, um hoffentlich anderen zu helfen, die auf dasselbe Problem stoßen könnten.

Die Beispiele auf der Website des Anbieters sind etwas vage und ich hatte das folgende Szenario angenommen.

Sie haben einen Link mit einem hrefn zu einigen Inhalten #id.

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

Und Sie haben eine Div, um diesen Inhalt zu halten.

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

Dann führen Sie Fancybox einfach durch einen 1-Liner.

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

Natürlich würden Sie denken , dass Fancybox kopiert den Inhalt und Änderung display: nonezu display: blockwerden und alles in Ordnung sein.

Das passiert aber nicht.
Der Inhalt wird weiterhin geladen, aber der Inhalt ist ausgeblendet und Sie haben eine leere Fancybox.*cry*

Question 2

Die Lösung ist sehr einfach, aber ich habe ungefähr 2 Stunden und die Hälfte der Haare auf meinem Kopf gebraucht, um sie zu finden.

Wickeln Sie einfach Ihren Inhalt mit einem (redundanten) div , der hat display: noneund Bob ist Ihr Onkel.

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

Voila

Question 3

Die Art und Weise, wie ich das herausgefunden habe, war das Beispiel index.html / style.css, das im Lieferumfang der Fancybox-Installation enthalten ist.

Wenn Sie den Code anzeigen, der für die Demo-Website verwendet wird, und im Grunde genommen kopieren / einfügen, ist alles in Ordnung.

Damit eine Inline-Fancybox funktioniert, muss dieser Code in Ihrer index.html-Datei vorhanden sein:

  <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>

Denken Sie daran, genau anzugeben, in welchen Ordnern sich Ihre Skriptdateien befinden und wohin Sie im Head-Tag zeigen. sie müssen korrespondieren.

Question 4

Nur etwas, das ich für Wordpress-Benutzer gefunden habe,

So offensichtlich es auch klingen mag: Wenn Ihr div AJAX-Inhalte zurückgibt, die auf einem Header basieren, der normalerweise auf eine neue Post-Seite verweist, wird in einigen Tutorials angegeben, dass false zurückgegeben wird, da Sie die Post-Daten auf derselben Seite und zurückgeben Die Rückgabe würde verhindern, dass sich die Seite bewegt. Wenn Sie jedoch false zurückgeben, verhindern Sie auch, dass Fancybox2 dies ebenfalls tut. Ich habe stundenlang versucht, diese blöde, einfache Sache herauszufinden.

Stellen Sie für diese Art von Links einfach sicher, dass die href-Eigenschaft das Hash-Div (#) ist, das Sie auswählen möchten, und stellen Sie in Ihrem Javascript sicher, dass Sie nicht false zurückgeben, da dies nicht mehr erforderlich ist.

Einfach ich weiß ^ _ ^