Laden von Inline-Inhalten mit FancyBox

68

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*

jquery html css fancybox Marko
quelle

Antworten:

122

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

Marko
quelle
4
Genau dieses Beispiel wird auf der Fancybox-Website behandelt - werfen Sie einen Blick auf Beispiel 5 Fancybox.net/blog
Bobby Jack
8
@ Bobby Jack - Ja, aber sie machen es nicht sehr offensichtlich. Wenn Sie sich im Internet umschauen, hatten viele Leute das gleiche Problem wie ich - hoffentlich hilft dies jemandem.
Marko
es hat mir geholfen, Alter ... ich war auch verrückt ... danke fürs Teilen
mysteriöser
Ich habe Fancybox jetzt ein bisschen getestet und ich muss sagen, dass es nicht sehr gut ist. jQuery Toolsbox ist dann eine bessere Wahl - viel einfacher zu bearbeiten.
Steven
2
Ich habe eine Stunde lang versucht, dies herauszufinden, bevor mich eine Google-Suche hierher gebracht hat.
CreateSean
8

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.

Tandy
quelle
2

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ß ^ _ ^

Jamaal Okeen Ephriam
quelle