Fifty Ways to display photos and other stuff.
Eine schöne und funktionale Alternative zu herkömmlichen Popups sind Skripte, die einen Inhalt in einem transparenten Overlay anzeigen.
Lightbox
Hierzu gibt es verschiedene Möglichkeiten. Über das Lightbox-Skript hatte ich hier ja schon einmal geschrieben.
Mit dem Lightbox Skript kann man Bilder in einem Popup vergrößert darstellen.
Greybox
Eine weitere Variante ist die Greybox.
Im Unterschied zur Lightbox kann man mit der Greybox auch auf eine Url verlinken und eine komplette Webseite anzeigen lassen.
Thickbox
Noch ein Schritt weiter, kann man mit der ThickBox
- einzelne Bilder anzeigen
- mehrere Bilder in einer Galerie anzeigen
- Text anzeigen
- Fremde Webseiten öffnen
- Links in der Box anzeigen und in der Box öffnen
Für die ThickBox muss eine Javascript Bibliothek installiert werden (jQuery)
Ebenso ist es möglich Flash und Videos in der ThickBox anzeigen zu lassen.
Ergänzung 4.9.2008
Multibox
Als weitere Möglichkeit gibt es auch noch die Multibox, die die mooTools Bibliothek verwendet. Hiermit kann neben Bildern auch Flash-Filme, Videos und html-Seiten anzeigen lassen.
FancyZoom fehlt mir hier noch
http://www.cabel.name/2008/02/fancyzoom-10.html
Heyda – Danke für den Tipp. Hab ich mir vorhin mal angeschaut. Sieht auch sehr gut aus.
Ich habe diese Light- und Greyboxen schon zu oft gesehen und ein gewisser Sättigungsgrad ist bei mir erreicht…
Über Geschmack lässt sich bekanntlich nicht oder bis zum Skt. Nimmerleinstag streiten und was den Sättigungsgrad anbetrifft hat jeder seine eigenen Grenzen. „Nicht schön aber selten“ ist nun mal auch nicht so ganz meine Devise. Finden kann das also jeder wie er mag, jedoch würde ich den Einsatz auf einer Webseite für Kunden nicht nach persönlichem Sättigungsgrad bemessen.
Bei der Thickbox kann man den Grad der Transparenz so runterdrehen, dass das Overlay gar nicht mehr zu sehen ist. Dann bleibt nur noch das Bild in der Vergrößerung, welches auch dann angezeigt wird, wenn JS deaktiviert ist. FancyZoom hat erst gar kein Overlay, aber leider auch keinen Schatten im IE.
Abgesehen davon ist die Thickbox auch als Textpopup zu gebrauchen. Letzeres ist z.B. sehr sinnvoll wenn jemand seinen Text mit Erläuterungen zu bestimmten Fachwörtern spicken möchte – soll ja durchaus vorkommen, dass man Kunden hat, die so etwas brauchen.
@Jutta: Stimmt – im geschäftlichen Bereich, für Kunden hast du völlig recht. Ich schrieb ja bloß als Hobbybastler ;-)
;-) – ja schon gut und so ganz Unrecht hast du ja nicht. Alles was effektvoll ist, wird schnell kopiert. Dann sieht man das auf jeder zweiten Webseite – und sich auch schnell satt daran. Nur beurteile ich das nicht ausschließlich danach wie oft ich es schon gesehen habe, denn eine Webseite sollte mehr sein als bloße Effekthascherei. In diesem Fall sehe in den Skripten auch sinnvolle Funktionalität – und das Overlay kann man ja wegmachen.
Moin Moin
Ich hab mal eine Frage zur Greybox – ist es möglich, ohne irgendwelche Fenster eine Flashanimation in der Greybox darzustellen?
Auch nicht mit dieser Fullscreenvariante wo noch ein Rahmen dargestellt wird – sondern wirklich schwarzer/transperenter Hintergrung!
Da bin ich mir nicht sicher. In der Greybox kann man eine ganze Webseite anzeigen lassen. Wenn dann in dieser Webseite ein Flash eingebettet wäre, könnte es möglich sein. Das würde ich einfach mal ausprobieren bzw. mich hier an den Entwickler wenden.
Womit es jedoch auf jeden Fall gehen sollte ist mit der Multibox – dort wird auf der Webseite beschrieben, dass auch swf angezeigt werden können.
Was meinst du mit „ohne irgendwelche Fenster“ ? Willst du die ganze Seite durchscheind dunkel machen und dann in der Mitte den Film ohne Rahmen drumherum laufen lassen?
Bei der Lightbox habe ich in dieser Richtung schon einmal was experimentiert. Hier kann man in der .css Datei bzw. in dem Javascript die Werte verändern und so z.B. eine andere Hintergrundfarbe einstellen, den Grad der Transparenz bestimmen und auch die Rahmeneigenschaften verändern, soweit ich mich erinnern kann, kann man den Rahmen auch weglassen. Irgendwo steht eine Auszeichnung zu „border“. Wie das jedoch im Detail bei der Greybox funktioniert kann ich dir leider nicht sagen, vermute aber mal, dass es ganz ähnlich ist. Persönlich würde ich jedoch mit der Multibox ansetzen.
hallo zusammen,
also ich muß sagen das ich bis vor wenigen tagen weder was greybox noch von thickbox gehört habe. nur die lightbox kannte ich, aber auch nur vom namen. da ich mich mit der thickbox nun 2 tage beschäftigt habe funktioniert das auch alles. ich bin so einer bei dem die besucher meiner seite mit extrem viel erklärungen „zu kämpfen“ haben. text, text, text bei mir ohne ende. geht nicht anders! und popups wollte ich nicht. darum finde ich die thickbox genial, wenn man sich sicher auch ewig und drei tage über das scripting streiten kann. ich kenn im moment einfach nichts besseres und was zu meckern gibts ja immer und bei allem. gut mir ist das hintergrundbild auch zu dunkel. aber des krieg ich auch noch hin:-). – und wie man so einen monatskalender ohne php einbaut find ich auch noch raus. das übrigens hier ist eine sehr schön aufgemachte seite. muß man auch mal sagen (dürfen).
hallo @ all,
habe die lightbox version mal in mein project eingearbeitet und muss sagen, tollet tool und funzt super, außer das ich mich hier im netz nich fündig werde um zu erfahren wie ick nen download button im geöffneten bild einfüge und den rechtsklick zum download des bildes nichtmehr benötige. komisch is, das der button als gif schon im image ordner der lightbox liegt nur nicht zum einsatz kommt. wird wohl heißen, das ick mich doch mal an das script setzen muss um ihn einzuarbeiten.
naja was solls, ick wünsch euch noch allet jute und bye bye