15 JavaScript LightBox Skripte

Posted on Nov 22, 2008 in Webentwicklung | 10 Comments
15 JavaScript LightBox Skripte

Fotografen, die eine Webseite betreiben, haben die Qual der Wahl, wie sie ihre Bilder präsentieren. Ebenso geht es jeden Webseitenentwickler, der in irgend einer Form Bilder präsentieren will. Es gibt mittlerweile zahlreiche Skripte die es erlauben, mittels JavaScript, zu einem Thumbnail auf Klick ein Bild in voller Größe zu präsentieren. In diesem Blogeintrag will ich die populärsten und besten Skripte vorstellen. Sollte ich allerdings eines vergessen haben, so bitte ich um ein kurzes Kommentar und ich werde es ergänzen.

Um nochmal ein Beispiel für ein gutes LightBox Skript zu geben, hier einige Bilder, die bei einem Klick mittels dem Skript FancyBox eine größere Version zeigen (ausserdem ne schöne Werbung für meine Bilder ;):

Impingement a day without rain prelude of a busy day

Die Skripte sind nach den verschiedenen JavaScript Frameworks, die sie verwenden gruppiert. So kann man das Skript wählen, für das man eventuell bereits das nötige Framework ohnehin schon integriert hat.

Die Skripte unterscheiden sich hinsichtlich ihrer Features und ihrer Lizenz, die ich für jedes Skript aufgeführt habe.

  • Galerie
    Manche LightBox Skripte unterstützen das hin- und herblättern zwischen mehreren Bildern
  • Inhalte
    Neben Bilder können auch einige LightBox Skripte Webseiten, iFrames, Videos und sonstige Inhalte anzeigen
  • Lizenz
    Es gibt komplett kostenlose, für nicht-kommerzielle Projekte kostenlose und ausschließlich kostenpflichtige Skripte

Ohne JavaScript Bibliothek

FancyZoom

fancyzoom

Galerie: nein
Inhalte: Bilder
Lizenz: für nicht-kommerzielle Zwecke kostenlos (für kommerzielle Projekte einmalig 39 € pro Seite)

FancyZoom kommt ohne eine JavaScript Bibliothek aus und ist mit knapp 50 kb (Bilder und komprimiertes JavaScript) sehr kompakt. Es ist gut geeignet für Seiten wo eben mal schnell eine Zoomfunktion zur Verfügung gestellt werden soll. Ich nutze es auch für meinen Blog (siehe die drei Bilder oben).

greybox

GreyBox

Galerie: ja
Inhalte: Bilder, Webseiten
Lizenz: GNU LESSER GENERAL PUBLIC LICENSE Version 2.1

Greybox benötigt ebenfalls kein JavaScript Framework und ist lediglich 22 kb klein. Es unterstützt Bildergalerien und erlaubt es auch Webseiten zu öffnen. Selbst habe ich das Skript noch nicht getestet, die Beispiele find ich von der Aufmachung her nicht so ansprechend.

jQuery

FancyBox

FancyBox

Galerie: ja
Inhalte: Bilder, iFrames, beliebiger Content (Videos etc)
Lizenz: MIT Lizenz

FancyBox ist das bessere FancyZoom. Auf den ersten Blick hat es die gleichen ansprechenden Effekte, bringt aber eine weitaus größere Featureliste. So kann die Box beliebigen Inhalt enthalten und es sind auch Galerien möglich.

prettyPhoto

PrettyPhoto

Galerie: ja
Inhalte: Bilder, Flash Videos
Lizenz: Creative Commons Attribution 2.5

Ein sehr sauber umgesetztes Skript, das mit einem guten Design besticht (abgerundete Ecken und flüssigen Effekten).

jQuery lightBox plugin

jQuery Lightbox Plugin

Galerie: ja
Inhalte: Bilder
Lizenz: Creative Commons Attribution-Share Alike 2.5 Brazilian

Ein kleines Skript das nur Bilder unterstützt. Auf den ersten Blick ist störend, dass die Buttons für das Wechseln zwischen den Bildern einer Galerie nicht automatisch ausgeblendet werden. Bei dem Aktivieren des Skriptes für einzelne Bilder setzt das Skript auf die Selektoren von jQuery, was ein Verändern des HTML Codes überflüssig macht.

piroBox

piroBox

Galerie: ja
Inhalte: Bilder
Lizenz: Creative Commons Attribution-Share Alike 2.5 Italy

Das Design von piroBox ist im Beispiel etwas unpraktisch. So erscheinen die Buttons für nächstes und vorhergehendes Bild ganz am Bildschirmrand und auch die Ladeanzeige und der schließen Button erscheinen etwas “speckig”. (Ein erster Eindruck, im Detail hab ich das Skript nicht getestet).

Prototype und Script.aculo.us

Lightbox 2

Lightbox 2

Galerie: ja
Inhalte: Bilder
Lizenz: Creative Commons Attribution 2.5

Lightbox basierend auf dem Prototype Framework war der Protagonist unter den Lightbox Skripten und so wundert es nicht, dass es ein neues Projekt LightBox 2 gibt. Es unterstützt ausschließlich Bilder. Das Projekt wird sehr gut gepflegt.

LightWindow

LightWindow

Galerie: ja
Inhalte: Bilder, QuickTime Movies, Flash, YouTube, iFrames, praktisch alles
Lizenz: MIT Lizenz

LightWindow ist die Erweiterte Version von Lightbox und kann mit allen Inhalten umgehen, die man sich so vorstellen kann. Die letzte Version die ich getestet habe, war mir von den Wechsel zwischen den einzelnen Bildern zu langsam. Dennoch ist es sehr zu empfehlen (die neueste Version werde ich eventuell die nächsten Tage mal antesten). Hier kann ich bestätigen das sich Aussehen, Farben und Bilder gut anpassen lassen.

Lightview

Lightview

Galerie: ja
Inhalte: Bilder, beliebiger Content, Flash, Quicktime, über Ajax gelieferte Inhalte
Lizenz: für nicht-kommerzielle Projekte 3 € für kommerzielle Projekte ab 49 €

Dieses Skript verwende ich auf meiner Webseite. Vom Design (abgerundete Ecken, ansprechende Buttons für Galerien) und dem “Feeling” hat mir diese Lösung am besten gefallen. Der Wechsel zwischen mehreren Bildern geht flüssig und das Öffnen und Schließen von Bilder ist sauber umgesetzt. Zudem gibt es eine AutoPlay Funktion. Wenn man dieses Skript genauer testet, dann spürt man schnell das hier sauber gearbeitet wurde und der Code eine gute Qualität hat. Auch hier hat man starken Einfluss auf das Design (mittels CSS).

MooTools

Slimbox

Slimbox

Galerie: ja
Inhalte: Bilder
Lizenz: MIT Lizenz

Slimbox bezeichnet sich selbst als besseren Klon von Lightbox 2, basiert aber selbst auf MooTools und nicht auf dem Prototype Framework. Ein erster Test kann durchaus überzeugen.

multibox

multibox

Galerie: ja
Inhalte: Bilder, beliebiger Content, Flash, Quicktime, über Ajax gelieferte Inhalte
Lizenz: MIT Lizenz

Dieses Skript erscheint vom Design wie eine Mischung aus dem FancyZoom und dem Lightbox 2. Es kommt mit nahezu allen Inhalten klar, hat flüssige Effekte und wäre mein Favorit unter den MooTools basierten Lightbox Skripten.

ReMooz

ReMooz

Galerie: nein
Inhalte: Bilder
Lizenz: MIT Lizenz

ReMooz kommt mit den gleichen Effekt wie FancyZoom, wobei mir die Ladeanzeige nicht besonders gefällt (es wird ein animiertes GIF über das Thumbnail gelegt). Insgesamt aber wieder eher ein kleines Skript mti weniger Funktionen, das keine Vorteile gegenüber dem kleinen FancyZoom bietet (das kein Framework benötigt).

SqueezeBox

SqueezeBox

Galerie: nein
Inhalte: Bilder, iFrames, Flash Videos, Ajax Requests
Lizenz: MIT Lizenz

Dieses Skript ist vom gleichen Entwickler wie ReMooz und ist besonders gut geeignet für Inhalte, die mittels Ajax nachgeliefert werden sollen.

Videobox

Videobox

Galerie: nein
Inhalte: Flash Videos
Lizenz: MIT Lizenz

Videobox ist, wie der Name schon sagt, nur für Flash Videos gedacht. Wer sich hier festlegen will, für den ist das Skript durchaus geeignet. Ich würde hier aber eher zu multibox greifen, da man hier die Wahl hat und nicht auf Videos begrenzt ist.

Yahoo YUI

YUI Lightbox

YUI Lightbox

Galerie: nein
Inhalte: Bilder
Lizenz: Creative Commons Attribution-ShareAlike License, Version 3.0

Optisch und von den Effekten beim Popup ist die YUI Lightbox aus meiner Sicht am schlechtesten. Wer allerdings YUI in seinem Projekt einsetzt, der sollte sich dieses Skript hier genauer ansehen.

10 Comments

  1. pc-nlCo
    25. November 2008

    Ich vermisse ThinkBox unter jquery…

    aber sonst eine schöne Übersicht…

    Hier noch eine schöne Matrix: http://planetozh.com/projects/lightbox-clones/

  2. runamoK
    3. Dezember 2008

    Vielen Dank für die tolle Übersicht, sehr hilfreich (:

  3. gracilis
    1. Februar 2009

    salve, eine interessante liste.
    hier auch ein script ohne bibliothek
    highslide.com

    gruss gracilis

  4. Michael Janik
    30. März 2009

    Ich wünsche mir mal ein Lightbox-Skript, wo auch mal Aussenstehende per Login Bilder in die Gallerie hochladen können. Viele meiner Webdesignkunden wünschen das.

  5. foo
    21. April 2009

    Dafür brauchst du doch keine spezielle Lightbox. Das ist ne sache der Programmierung. Oder verstehe ich dich falsch?

  6. CZ
    18. Juni 2009

    Diese ist auch nicht schlecht, Große Bilder passen sich dem Browserfenster an.
    Enlargeit V1.1

  7. danny
    23. August 2010

    du schreibst, deine 3 beispielbilder werden per fancyZOOM dargestellt, so wie ich das sehe, ist das aber fancyBOX..
    (fancyzoom hat nämlich keine galleriefunktion oder sehe ich das falsch!?)

  8. Tobi
    24. August 2010

    Hi Danny,

    ja, du hast recht. Der Beitrag ist noch mit meiner vorhergehenden Blogsoftware erstellt worden. Damals habe ich FancyZoom eingesetzt.

    Danke für den Hinweis, ich habe den Link korrigiert!

    Grüße
    Tobi

  9. Bildergalerie - XHTMLforum
    13. Januar 2011

    [...] [...]

  10. NIls
    19. April 2011

    Hallo,

    Was bedeutet MIT Lizenz?
    Bedeutet das, dass sie für die kommerzielle Nutzung freigegeben sind?

    Lg Nils