easy fancybox: inline content erstellen... wie?????

Hallo,

folgenden Code musst du in dein Theme einbauen. Das kannst du z.B. in die footer.php einbauen.

Zitat

<div style="display:none;" class="fancybox-hidden"> <div id="fancyboxID-1" style="width: 500px; height:100%;">
<p>Hier steht dein Text!</p>
</div>
</div>

Um die Lightbox dann aufzurufen setzt du diesen Link an die Stelle an der du diesen brauchst.

Zitat

<a class="fancybox" href="#fancyboxID-1">Link zur Lightbox</a>

VG
Philip

Hallo,

wie viele Lightboxen mit unterschiedlichem Text möchtest du denn einblenden? Du kannst diese unterscheiden indem du die ID, in meinem Beispiel ist das "fancyboxID-1" änderst. Diese ist im Code für die Box und im Link enthalten. Wenn du jetzt aber auf jeder Seite eine andere Box möchtest, dann kannst du den Code auch im Backend in den Beitrag oder die Seite eintragen. dafür musst du aber in den "Text" Modus wechseln. Und jedesmal auch die ID ändern schadet nicht.

Der Text muss da hin wo "Hier steht dein Text" steht.

Um solche Dinge ausführen zu können solltest du dir überlegen, ob du dich nicht etwas mit html und css beschäftigst.

VG
Philip

Zitat von FJB

offensichtlich das einzig freie Plugin, um inline-content als Lightbox darzustellen????

Und was hattest Du nun nicht an dem verstanden, in dem Du Dich einarbeiten wolltest?

Ein schnelles Beispiel, ist sicherlich noch nicht perfekt. Erst siehst Du nur 'Ein Link' und beim Überfahren mit der Maus öffnet sich die Box mit dem restlichen Text. Plugin für einfache Sachen nicht erforderlich, doch das schrieb ich ja bereits im anderen Thread. Die Maße müssen angepasst werden, ist wohl klar.

CSS:

<style type="text/css">
a.notizen:link    {display:block; overflow:hidden; width:60px; height:18px}
a.notizen:visited {display:block; position:absolute; z-index: 10; background-color:gray; border:1px solid red; width:200px; height:200px}
a.notizen:hover   {display:block; position:absolute; z-index: 10; background-color:gray; border:1px solid red; width:200px; height:200px}
a.notizen:active  {display:block; overflow:hidden; width:60px; height:18px}  
</style>

HTML:

<div id="notizen">
<a href="#notizen" class="notizen">Ein Link mit viel Text<br>
Noch eine zweite Zeile nur für den Test.
Und noch eine dritte Zeile für den Test
</a></div>

Nun habe ich mich noch etwas mehr umgeschaut, eigentlich interessieren mich diese CSS-Sachen auch nur wenn ich die benötige, doch wer etwas sucht der findet auch Ansätze und dieser gefällt mir augenblicklich noch besser als der erste, da kein Link erforderlich:

CSS:

<style type="text/css">
div#test {display:block; overflow:hidden; width:60px; height:18px}
div#test:hover {display:block; position:absolute; z-index: 10; background-color:gray; border:1px solid red; width:200px; height:200px}
</style>

HTML:

<div id="test">Ein Link<br>
Ein Link mit viel Text<br>
Noch eine zweite Zeile nur für den Test.<br>
Und noch eine dritte Zeile für den Test</div>

Und ausrichten oder mit Transparenz gestalten, kannst Du doch das wie Du möchtest.

Hallo FJB,

das freut mich, dass alles so gut funktioniert hat bei dir. Mit etwas eigenem Engagement kommt man doch sehr weit. Leider vermisse ich das hier sehr häufig. Deswegen freut es mich umso mehr dass du das selbst hinbekommen hast.

VG
Philip