Boxtechnologien und Bildgalerien

Immer häufiger sieht man in letzter Zeit sogenannte Inline-Popups, die nicht den PopUp-Blocker des Browsers veranlassen dieses zu unterdrücken. Dies kann von unerwünschter Werbung, aber häufiger von Bildergalerien, oder Detailansichten genutzt werden. Einige Ansätze dazu gibt es im Netz zu finden, ich habe einmal die für mich interessantesten drei Versionen aufgeführt.

Lighbox: Lightbox verwende ich bei polente.de selbst, daher widme ich mich dieser zuerst. Wer ein einfaches System sucht um ein Bild mittels einer Vorschaubildes darzustellen und bei Klick darauf ein Detailbild angezeigt zu bekommen, ist mit der Lightbox sehr gut bedient. Mittlerweile in Version 2.0 erschienen, bietet sie auch sehr viele Konfigurationsmöglichkeiten. Selbst die Integration in WordPress stellte keinerlei Problem dar. Nachdem man die JavaScipt-Dateien hoch geladen hat und einen Link um ein Vorschaubild gelegt hat, der auf ein Detailbild zeigt, braucht man nur noch den Codeschnipsel rel="lightbox" zum Anker zufügen und schon wird, bei aktiviertem JavaScript, das Bild in einem hübschen DHTML Division dargestellt. Die Einbindung sieht dann bei mir zum Beispiel so aus:

<a rel="lightbox" href="/uploads/2007/05/coolerjob.jpg" title="Text im PopUp">    <img src="/uploads/2007/05/coolerjob.thumbnail.jpg" alt="*" />

</a>

Der JavaScript Teil wird folgendermassen eingebunden, bei der Version 2 werden noch das Prototype Framework and die Scriptaculous Effects Bibliothek benötigt und sie unterstützt auch mehrere Bilder auf einer Seite:

<script type="text/javascript" src="lightbox.js"></script>

Verwendete Bilder und Stylesheets müssen dann nur noch an die entsprechenden Plätze kopiert werden.

Wenn man JavaScript deaktiviert hat, wird das Detailbild im selben Fenster aufgerufen und man kommt zur ursprünglichen Seite mit dem Browser Zurückbutton zur vorherigen Seite zurück.

Thickbox 3: Thickbox 3 ist, wie der Name vermuten lässt dick. Aber mit der Dicke ist es auch mächtig. Neben Bildgalerien bietet es auch noch andere Fuktionalitäten. Man kann im Grunde, ählich wie bei der Lightbox aussehende Layer erzeugen, die den bestehenden Inhalt der Seite abdecken und mit fast jedem beliebigen Inhalt gefüllt werden können. Dazu gehören Fliesstexte, iframes, AJAX Inhalte, Bildergalerien und auch alles gemischt. Sogar scrollbar ist der Inhalt darstellbar. Durch die iframes sind auch fremde Webseiten in den JavaScript-Poups darstellbar.

Thickbox 3 benötigt die jQuery JavaScript Bibliothek um zu funktionieren und diese müssen dann auch im head der Seite eingebunden werden. Dies geschieht einfach indem man den folgenden Code einfügt.

<script type="text/javascript" src="/jquery.js"></script><script type="text/javascript" src="/thickbox.js"></script>
<link rel="stylesheet" href="/thickbox.css" type="text/css" media="all" />

Dazu gehört dann noch das obenstehende Stylesheet und nachdem man sich den Funktionalitäten vertraut gemacht hat, kann man im Supportforum Hilfe bei noch offenen Fragen finden.

GreyBox: Greybox hat noch zusätzlich die eine oder andere nette Funktionalität, die ich hier nicht vorenthalten möchte. So kann man zum Beispiel zusätzlich zur Einblendung der Bilder, oder Informationen in Fliesstexten auch fremde Seiten einbinden. Nicht ganz so mächtig wie Thickbox 3 ist es dann auch schneller und leichter einsetzbar.

Nachdem man dem head eine Variablendefinition zugefügt hat und die Scriptdateien eingebunden hat, kann es eigentlich schon losgehen:

<script type="text/javascript">    var GB_ROOT_DIR = "http://mydomain.com/greybox/";

</script>
<script type="text/javascript" src="/AJS.js"></script><script type="text/javascript" src="/AJS_fx.js"></script>

<script type="text/javascript" src="/gb_scripts.js"></script>

<link href="/gb_styles.css" rel="stylesheet" type="text/css" />

Die Darstellung der Inhalte erfordert beim Anwender etwas Übung, da man auch immer eine Lösung für deaktiviertes JavaScript einbauen sollte. Lightbox erscheint mir als einzige einen kompleten Fallback für deaktiviertes JavaScript zu bieten. Ist aber auch die am wenigsten bietende Scriptsammlung.

Wer also auf die Schnelle eine Bildergalerie oder ein Detailbild in einem PopUp darstellen möchte und sich nicht allzu lange mit den Scripten beschäftigen will, ist mit der Lightbox oder Lightbox 2.0 sehr gut bedient. ThickBox 3 bietet die meisten Möglichkeiten, man muss sich aber auch intensiv damit beschäftigen um es im vollen Umfang einsetzen zu können. Wenn man mal schnell einen PopUp-Effekt braucht, kann GreyBox ausreichend sein.

Der Beitrag steht hauptsächlich hier, damit ich selbst die Links schnell finde und Leute die vielleicht nach einer PopUp-Lösung suchen, eine kleine Hilfestellung und Links finden. Technische Hilfe findet man in den entsprechenden Supportforen der Angebote.

Edit: Ich verwende mittlerweile auch die Slimbox, da diese wesentlicher schlanker als die Lightbox ist und diese leider auf dem immer fetter werdenden Prototype aufsetzt. Das bei der Slimbox verwendete Mootols Framework erscheint mir sehr viel angemessener. Es handelt sich hierbei um einen Lightbox Klon, der sich auch genauso verhält, nur eben sehr viel schlanker ist.


Kommentare

5 Antworten zu „Boxtechnologien und Bildgalerien“

  1. Slimbox hinzu gefügt. ;)

  2. Danke für so ein guten Vergleich, ich selbst nutze Lightbox und bin sehr zufrieden nur schade, dass man damit ausser Bilder nichts anzeigen kann….

  3. ich habe mir ein solches script selbst geschrieben und verwende dies unter anderem im bilderalbum von
    http://www.saar-piranhas.de.vu

    mich würde nur mal interessieren, wie diese scripts wie z.b. „lightbox“ es schaffen, den layer über die scrollbar zu legen…

    weiß das zufällig jemand?

  4. Ich wüsste zu gerne wo die Lightbox (also in welchem Browser) das tut.

  5. Kann man mit Lightbox alle Frames abdunkeln? Wenn ja, wie geht das?

    Gruß