Bildergalerie mit Lightbox

Lightbox2 ist ein kostenloses Javascript, mit dem eine elegante Bildergalerie erstellt werden kann. Dabei werden anklickbare Vorschaubilder (auch Thumbnails genannt) mit einem Mechanismus ausgerüstet, sodass nach dem Anklicken dieser Vorschaugrafik ein „Overlay“ (Überblendeffekt) erzeugt wird, damit der restliche Bildschirminhalt blasser wird. Im Zentrum erscheint dann eine größere Version des angeklickten Bildes (die tatsächliche Vollansicht), die über den regulär vorhandenen Link auch so erreichbar gewesen wäre. Damit ist die Galerie auch ohne JavaScript nutzbar, nur eben visuell nicht so schön und bequem.
Anzeige

Über die Vollansicht kann dann direkt zu weiteren Vollansichten dieser Galerie navigiert werden, weshalb Lightbox2 inzwischen weite Verbreitung gefunden hat. Zu jedem Bild kann optional eine Bildbeschreibung verfasst werden.

Das Skript funktioniert mit allen modernen Browsern sofern Javascript nicht deaktiviert wurde, und benötigt außerdem zwingend zwei weitere Bibliotheken (ebenfalls JavaScripte), die auch auf der Seite integriert werden müssen, um die Funktionalität zu gewährleisten.

Screenshots einer Lightbox-Galerie:

Eventuelle Nachteile

Für die von Lightbox2 genutzten Effekte und Mechanismen sind diese beiden Bibliotheken eigentlich maßlos überdimensioniert ('prototype.js' ist mal eben schlappe 121kb groß, 'scriptaculous' hingegen besteht aus einer ganzen Sammlung weiterer Dateien, von denen drei für Lightbox2 benötigt werden, zusammen weitere 45kb), jedoch könnten sie für andere visuelle Extras genutzt werden - da sie unabhängig von Lightbox2 sind. Manche Content Management Systeme verwenden eine oder gar beide Bibliotheken für andere Zwecke, sodass sie auf manchen Seiten ohnehin schon vorhanden sind.

Download, Anleitung und Installationshinweise (Englisch)

Lightbox2 kann man mit anderen Scripten kombinieren. Ob der gewonnene visuelle Nutzen aber im Verhältnis zum technischen Aufwand steht, muss ein jeder Webschaffender für sich selbst entscheiden. Nicht immer ist jede technische Raffinesse wünschenswert.

Kombination mit CMotion Image Gallery

Kombiniert mit CMotion Image Gallery lässt sich eine einfache Bildergalerie erschaffen, welche man platzsparend mit der Maus, links oder rechts positioniert durchforsten kann. Dazu muss nur folgender Quelltext in Kombination der

  1. 'motiongallery.js'
  2. 'gallerystyle.css'

vorhanden sein.

 

<div id="motioncontainer" style="position:relative; overflow:hidden;  width:650px; height:110px;"> <div id="motiongallery" style="position:absolute;  left:0px; top:5px; white-space:nowrap;"> <nobr id="trueContainer">  <a href="Bild.jpg" rel="lightbox[Name]" title="Name"><img src="Bild.jpg" height="100" border=1> </a> </nobr> </div> </div>

 

Es sei dabei aber angemerkt, dass die Galerie dann nicht mehr barrierefrei zugänglich ist, da ihre vollständige Darstellung nicht mehr gegeben ist, und die so „platzsparend“ präsentierten Bilder nur bei verfügbarem JavaScript alle erreichbar sind.

Alternativen

js_popup

Es existiert ein weniger aufwändiges, dafür aber kleineres Script, das der Lightbox2 nachempfunden ist, dessen Einbindung aber etwas anders funktioniert: js_popup. Dieses Script benötigt keine komplizierte Einbindung und bietet fast alles, was auch die Lightbox bietet.

highslide

Auch überlegenswert ist das highslide Script, welches ungeübten Seitengestaltern viele Layouts und Anwendungsmöglichkeiten bietet.

Wenn ein Browser kein Javascript unterstützt, öffnet sich der Inhalt alternativ einfach in einem neuen Fenster oder Tab (was Besucher potentiell sehr stören kann!). Auch werden die Bilder immer in ihrer vollen Größe auf der Seite benötigt, sodass der Seitenaufbau bei langsamen Internetverbindungen länger dauern kann, bis die verkleinert dargestellten Bilder alle geladen haben - ein Umstand, der bei immer mehr verfügbaren Breitbandanschlüssen zunemhmend an Bedeutung verliert. Da die Bilder in ihrer vollen Größe eingebunden werden ist damit auch bei CSS-gesteuerten Seiten die Druckausgabe in ihrem Layout erheblich betroffen, da die Bilder je nach ihrer tatsächlichen Größe logischerweise sehr unterschiedlichen Raum einnehmen können.

 

Slick

Auch der Image-Slider Slick bietet großartige Möglichkeiten eine Bildergalerie kostenlos zu erstellen.

Besonders toll, sind hierbei die sehr umfangreichen Gestaltungsmöglichkeiten.

 

Fazit

Mit Lightbox, js_popup, highslide oder Slick können Sie sehr ansprechende Bildergalerien erstellen.

Warum Bildergalerien besonders wichtig sind, erfahren Sie in dem Artikel "Bilder-Slider oder Bilderleiste mit strahlenden Personen für mehr Lebendigkeit".


Anzeige

Mehr Artikel zu »Benutzerfreundlichkeit: Design«