Lightbox JS für Dialogfenster
Chris Campbell hat in seinem Blog ein ausführliches Tutorial veröffentlicht, dass eine neue Implementierung der Lightbox Bibliothek nutzt um komplette Dialogfenster zu öffnen.
Diese Dialogfenster können dann asynchron mit Inhalt befüllt werden.
Chris nennt seine Implementierung “Lightbox gone wild” - da er die Effektbibliothek Moo.Fx nutzt um das ganze optisch sehr viel ansehnlicher zu gestalten als dies bisher mit Lightbox möglich war.
Das ganze sieht wirklich sehr gut aus, und ist relativ leicht zu implementieren.
In dem Tutorial wird auch sämtlicher CSS und JS Code bereitgestellt, der nötigt ist.
Insgesamt kann ich dieses Tutorial nur empfehlen 
2 Kommentare zu 'Lightbox JS für Dialogfenster'
Kommentar schreiben
Sie müssen eingeloggt sein um einen Kommentar zu verfassen.
Hi Philipp,
wieder einmal machst Du auf eine interessante ‘Sache’ aufmerksam.
Allerdings benützt Chris in seinem tutorial auf particletree.com nicht moofx. sondern ‘nur’ prototype.
Die Verknüpfung der zwei tollen Skripte (lightbox.js, moo.fx.js) zur Erstellung eines Effektes beim Zoomen eines Bildes findet hier statt:
Demo (mit dem tollen Pariser Container) :
http://www.alwaysbeta.com/2006/01/30/first-post/
Tutorial:
http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/
Bei dem von Chris geänderten lightbox (gone wild) missfällt mir das die Inhalte des anzuzeigenden modalen Dialogs in einer weiteren Datei stehen müssen. Wenn das optional wäre fände ich das richtig cool, aber so mit diesem Zwang, neeh ich weiss nicht …
Der Verzicht auf das png welches das dimmen des Hintergrundes vornimmt gefällt mir gut, weil dann der seltsame Filter für den IE nicht mehr produziert werden muss und die opacity (wie heisst denn das auf deutsch ?) regulierbar wird.
Was den Effekt, erzeugt durch moo.fx in der alwaysBETA Lösung betrifft kommt der IMHO im tutorial viel besser zur Geltung als bei der Demo. Das mag an der Bildgrösse liegen oder an meinem Geschmack
Bis dann
Joachim
P.S.
Hst Du gesehen, Valerio Proietti hat eine neue Version von moo.fx erzeugt und eine Seite Dokumentation hinzugefügt. Schön, dass er Zeit gefunden hat weiterzumachen.
Joachim
10 Feb 06 um 1:02
Danke für den Hinweis auf die Doku, hab ich gleich mal in meinen Moo.FX Artikeln verlinkt.
Am WE schreib’ ich was zu moo.ajax
Opacity heisst auf deutsch “Deckkraft”, es gibt zwar auch das Wort “Opazität” für “Undurchsichtigkeit” , ich habe das aber noch niemanden sagen hören
Ansonsten befasse ich mich zur Zeit recht intensiv mit Scriptaculous - speziell mit dem Inplace Editor. Das finde ich eine sehr spannende Sache.
Es ermöglicht, wenn man es richtig macht, wirklich tolle UI Verbesserungen.
Speziell beim Bearbeiten von Datensätzen ergeben sich hier ganz neue Möglichkeiten
Vielleicht werde ich auch mal ein kleines Beispielprojekt bei Ajax Info dazu schreiben.
Philipp
10 Feb 06 um 1:55