Laden von Inline-Inhalten mit FancyBox

Nun, ich schreibe diesen Beitrag einfach, um anderen zu helfen, die das gleiche Problem haben könnten.Laden von Inline-Inhalten mit FancyBox

Die Beispiele auf der Anbieter-Website sind ein wenig vage und ich hatte das folgende Szenario angenommen.

Sie haben einen Link mit einem href n bis zu einem gewissen Inhalt des #id.

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

Und Sie haben einen div, dass der Inhalt zu halten.

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

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

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

Natürlich, würden Sie denken, dass Fancybox den Inhalt kopiert und display: none-display: block und alles wird in Ordnung sein ändern.

Aber das passiert nicht.
Es lädt immer noch den Inhalt, aber der Inhalt ist ausgeblendet und Sie haben eine leere Fancybox. *cry*

Quelle

2010-10-18 Marko

121

Die Lösung ist sehr einfach, aber nahm mich etwa 2 Stunden und die Hälfte der Haare auf meinem Kopf, um es zu finden.

Einfach Wrap Ihre Inhalte mit einem (redundant)div die display: none und Bob ist dein Onkel hat.

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

Voila

Quelle

2010-10-18 20:59:41 Marko

Dieses sehr Beispiel mit auf der fancybox Website behandelt wird - zu sehen Beispiel 5 http://fancybox.net/blog –

@Bobby Jack - Ja, aber sie don‘ t es sehr offensichtlich machen. Wenn Sie sich im Internet umsehen, haben viele Leute das gleiche Problem wie ich - also hoffentlich wird das jemandem helfen. – Marko

hat mir geholfen, dude..ich war auch verrückt .. danke für den Austausch – mysterious

Ich verbrachte viel Zeit damit, um dies herauszufinden und die Art, wie ich tat, war das Beispiel index.html/style.css gehen durch die mit der Fancybox Installation kommt verpackt .

Wenn Sie den Code anzeigen, der für die Demo-Website verwendet wird und im Grunde kopieren/einfügen, wird es Ihnen gut gehen.

Um einen Inline zu bekommen Fancybox arbeiten, müssen Sie diesen Code in Ihre Datei index.html haben:

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

Denken Sie daran, über genau zu sein, welche Ordner Skript-Dateien abgelegt werden und wohin du im Head-Tag zeigst; sie müssen übereinstimmen.

Ich hoffe, das hilft.

Quelle

2011-09-22 23:15:11 tandy

nur etwas, das ich für Wordpress Nutzer gefunden,

Wie offensichtlich, wie es klingt, wenn Ihr div einige AJAX Inhalt sagen einen Header basiert Rückkehr, die aus auf eine neue Post-Seite häufig verbinden würde, werden einige Tutorials sagen false zurückgeben, da Sie die Postdaten auf derselben Seite zurückgeben, und die Rückgabe verhindert, dass die Seite verschoben wird. Wenn Sie jedoch false zurückgeben, verhindern Sie auch, dass Fancybox2 es tut. Ich habe Stunden damit verbracht, dieses dumme einfache Ding herauszufinden.

Also für diese Art von Links, stellen Sie einfach sicher, dass die href -Eigenschaft das Hashed (#) div ist, das Sie auswählen möchten, und stellen Sie in Ihrem Javascript sicher, dass Sie nicht falsch zurückgeben, da Sie nicht mehr müssen .

Einfach ich weiß^_^

Quelle

2012-11-02 21:59:12

Laden von Inline-Inhalten mit FancyBox

Antwort

Verwandte Themen