Javascript Lightboxes sind eine elegante und simple Möglichkeit einzelne Bilder, Fotogalerien, HTML-Inhalte oder Videos auf deiner Webseite zu integrieren. Seit die originale Version der Lightbox heraus kam, gibt es etliche sogenannte Klone mit den unterschiedlichsten Funktionen und Designs. Hier eine Auswahl der 10 schönsten Javascript- Lightboxes.
1. Lightbox 2
Die zweite Version der originalen Lightbox ist der Klassiker unter den Lightbox-Lösungen. Du kannst Bilder einzeln oder als Galerie integrieren. Das Design ist elegant, die Animation sehr angenehm.
Dateiformate: Bilder
Kostenlos, unter MIT License/GNU License
2. Fancybox
Zusätzliche Javascript-Plugins wie Mouse-Event und Easing erweitern die Funktionen der Fancybox. Das Design ist angenehm reduziert.
Dateiformate: Bilder, HTML-Elemente, Flash-Filme, iframe, Ajax
Kostenlos, unter MIT License/GNU License
3. Thickbox
Die Thickbox ist ein praktisches jQeury-Plugin. Das Design dieser Lightbox ist eher schlicht, kann aber noch per CSS optimiert werden. Bilder bleiben auch beim Scrollen im Browserfenster zentriert, und zu große Bilder werden automatisch an die Fenstergröße angepasst.
Dateiformate: Bilder, HTML-Elemente, Inline-Content, iframe, Ajax
Kostenlos, unter MIT License/GNU License
4. Highslide JS
Highslide JS ist eine schlichte Lightbox-Lösung mit Zoom-Effekt und etlichen Anpassungs- und Designoptionen.
Dateiformate: Bilder, HTML-Elemente
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich
5. Lightview
Lightview ist eine elegante Lightbox mit angenehmen Design und abgerundeten Ecken. Der Inhalt bleibt auch beim Scrollen im Browser zentriert, es gibt viele Möglichkeiten die Lightbox anzupassen.
Dateiformate: Bilder, Quicktime Movie, Ajax und Formulare, Anti-Aliasing, Iframe, Inline Content, Inline & Api, Flash
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich
6. Shadowbox
Das Design der Shadowbox ist schwarz, schlicht und eher eckig. Der Inhalt bleibt beim Scrollen im Browser zentriert. Die Animation ist angenehm.
Dateiformate: Bilder, Windows Media Player, Flash, Flash Video, HTML-Elemente, iframe
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich
7. Colorbox
Die Colorbox ist ein weiteres jQuery-Plugin und kann mit anderen Plugins kombiniert werden. Das Design ist schlicht und weiß, und du kannst es mit Hilfe von CSS leicht angepassen.
Dateiformate: Bilder, Ajax, Inline-Content, iframe
Kostenlos, unter MIT License
8. Phatfusion Multibox
Eine schöne dunkle Lightbox, HTML Beschreibungen der Bilder kannst du zusätzlich eingefügen. Die Lightbox scrollt im Browser mit.
Dateiformate: Bilder, flash, flv, mov, wmv, mp3, html, iframe
Kostenlos
9. Pirobox
Die Pirobox gibt es in 3 unterschiedlichen Designs (mit Schatten, weiß, oder schwarz). Beim Seiten-Scroll scrollt die Box mit.
Dateiformate: Bilder
Kostenlos
10. Pretty Photo
Eine schlichte Lightbox mit abgerundetem Design in schwarz oder weiß. Der Inhalt bleibt beim Scrollen zentriert.
Bilder, Flash, Vimeo, Quicktime, Youtube, iframe, Inline Content
Kostenlos, unter Creative Commons Attribution 2.5.
Wie gefallen dir diese Lightbox-Lösungen? Und kennst du noch weitere schöne Lightboxes, die hier unbedingt erwähnt werden sollten? Dann schreibe doch einfach einen Kommentar, ich freue mich auf deine Tipps!
Die Lightboxes sehen wirklich toll aus. Da kommt man ja echt in Entscheidungsschwierigkeiten :) Welche findest du denn am besten? Würde mich noch interessieren :)
@Barbara: Vielen Dank für deinen Kommentar :-) Ja du hast recht, das ist echt schwer zu sagen…Vom Design gefallen mir Fancybox und Phatfusion Multibox besonders gut, von den Funktionen bietet Thickbox echt viele Möglichkeiten (auch CSS Änderungen). Welche Lösung gefällt dir besonders?
Schwer zu sagen :) Ich müsste sie wohl erst einmal alle ausprobieren, um das richtig beurteilen zu können. Optisch gefallen mir Lightview, Shadowbox und Fancybox am besten.
Wirklich eine tolle Vorstellung. Ich weiß, was das für eine Arbeit ist, da ich auch mehrere Effekte ausprobierte. Letztendlich hab ich mich für Fancybox entschieden, da auch noch weitere Faktoren eine Rolle spielten (z.B. Ausnutzung vorhandener frameworks). Darüber hab ich neulich einen Artikel geschrieben - jedoch bin ich mir nicht sicher, ob Verlinkungen erwünscht sind, deshalb lass ich’s lieber.
Per Zufall (Twitter) fand ich hier her. Das sieht ja alles sehr ansprechend aus.
Viele Grüße
Oliver
@Oliver: Vielen Dank für deinen Kommentar, es freut mich riesig, dass dir unser Blog und der Beitrag gefällt :-) Klaro, sind interessante Links erwünscht. Meintest du deinen Artikel »Poppende Bilder: Etwas über Lightbox-Effekte im Blog«? Diesen finde ich nämlich super hilfreich ;-)
Viele Grüße
Ellen
Ok - nun hast Du den Artikel genannt, das ist mir lieber *fg
Twitterseidank kehrte ich heute schon wieder an diesen Ort zurück und hab rein präventiv mal ein Bookmark gesetzt. Schade, dass Du nicht die Option anbietest, Kommentare zu abonnieren. ;-)
Heute bin ich etwas tiefer eingestiegen und stellte fest, was es über den (interessanten) Blog hinaus gibt. Eure Arbeit kann sich sehen lassen. Das sieht wirklich sehr intuitiv, kreativ und stylish aus. Und ich sag das nicht, um Euch Honig um den Mund zu schmieren. vor konstruktiver Kritik würde ich mich nämlich auch nicht scheuen. ;-)
@Oliver: Vielen Dank für dein tolles Kompliment. Es freut uns riesig, dass dir unsere Arbeit so gut gefällt :-)
Danke auch für deinen Tipp einen RSS Feed für die Kommentare anzubieten. Wir Arbeiten gerade an unserem Redesign und werden das ganz bestimmt mit aufnehmen.
Viele Grüße und einen schönen Sonntag dir noch :-)
Hallo und danke für den schönen Vergleich.
Heutzutage kommt es auch einmal mehr auch auf geringe Dateigrößen an, Webseiten sollten sich trotz einer immer besseren Verfügbarkeit des Breitbandnetzes in Deutschland möglichst schnell aufbauen. Hier unterscheiden sich einige der hier vorgestellten Tools doch erheblich.
Liebe Grüße, Ela ;-)