Inhalt:

Bildergalerie erstellen mit Lightbox für Website

Bildergalerien auf Websites sind sehr beliebt. Man kann kleine Vorschaubilder anklicken und mit einem Effekt öffnet sich das Bild und der Hintergrund wird abgedunkelt. Ein sehr bekannte ist Lightbox. Hier wird gezeigt, wir man diesen Effekt auf der eigenen Website integriert.

Die Integration von Lightbox wird anhand eines Beispieles dargestellt.

Die vier Beispielbilder von Tübingen finden Sie unter anderen als zip-Datei auf der Seite: http://www.html-seminar.de/css-spalten-layout.htm

Vorbereitung der Bilder mit Gimp

Benötigt werden zwei Arten ein und desselben Bildes:

als Miniaturbild (klein zum Anklicken)
als großes Bild (das nach dem Anklicken angezeigt wird)

Öffnen Sie eines der Bilder in GIMP um die Größe zu ändern.

Die Größe des Bildes ändern Sie indem Sie in der Menüleiste auf „Bild – Bild skalieren“ klicken.

Bildgröße über GIMP ändern - Schritt 1

Es öffnet sich dieses Fenster.

Bildgröße über GIMP ändern - Schritt 2

Ändern Sie die Breite von 600 auf 200 Pixel (die Höhe wird automatisch geändert) und klicken Sie auf „skalieren“.

(Hinweis: Achten Sie auf Bilder die im Hochformat aufgenommen sind. Hier müssen Sie dann die Höhe auf 200px ändern.)

Bildgröße über GIMP ändern - Schritt 3

Das Bild ist nun verkleinert.

Sie können es in der Menüleiste unter „Filter – Verbessern – Schärfen…“ nachschärfen.

Bild über GIMP nachschärfen - Schritt 1

Das „Schärfen“-Fenster öffnet sich. Klicken Sie, nachdem Sie wie gewünscht geschärft haben, auf OK.

Bild über GIMP nachschärfen - Schritt 2

Nun ist die Größenänderung vollbracht und Sie können das Bild speichern. Klicken Sie dazu in der Menüleiste auf „Datei – Speichern unter…“.

Bild in GIMP speichern - Schritt 1

Nennen Sie das Bild „tuebingen-3-kl.jpg“ und speichern Sie es in den Ordner „bildergalerie“.

Bestätigen Sie Ihre Eingabe mit dem Button „Speichern“.

Bild in GIMP speichern - Schritt 2

Damit Sie die Bilder zuordnen können ändern Sie die Dateinamen um. So wird z.B. nun aus tuebingen-impressionen-sdim3496.jpg -> tuebingen-3-gr.jpg.

Bilder im Zielordner umbenennen - Schritt 1

Ändern Sie die restlichen Dateinamen in Ihrem Ordner und verkleinern die Sie die restlichen Bilder wie gerade mit Bild 3.

Bilder im Zielordner umbenennen - Schritt 2

Danach gibt es zu jedem großen Bild nun auch ein passendes kleines Miniaturbild.

Bilder im Zielordner umbenennen - Schritt 3

Vorbereitung HTML für Bildergalerie mit Lightbox

Erstellten Sie eine eigene index.html-Datei mit passendem Titel und Überschrift.

Vorbereitung für Lightbox in HTML

Diese Datei speichern Sie in Ihrem Ordner ab (hier: Beispiel).

HTML-Datei im richtigen Zielordner speichern

Fügen Sie in die index.html-Datei die kleinen Miniaturbilder mit dem üblichen HTML-Befehl ein.

Vorbereitung für Lightbox in HTML - Miniaturbilder einbinden

Das vorläufige Ergebnis sieht dann wie folgt aus.

Browser-Ansicht der Miniaturbildereinbindung

Um die großen Bilder auf die Miniaturbilder zu verlinken muss der

<a href>

-Tag zum Einsatz kommen (hier können Sie gerne schon einen Titel für die Bilder vergeben). Der HTML-Code und in Firefox sieht dies dann so aus:

Vorbereitung für Lightbox in HTML - große Bilder verlinken

Browser-Ansicht der Miniaturbilder mit Verlinkung

Nun ist alles vorbereitet und Lightbox kann zum Einsatz kommen.

Download von Lightbox

Lightbox können Sie auf folgender Website runterladen: http://www.lokeshdhakar.com/projects/lightbox2/

In der Navigation links klicken Sie dann auf „Download“.

Lightbox-Website

Auf der „Download“-Seite klicken Sie den Kasten mit der Speicherdiskette „Lightbox v2.04“ an.

Das Runterladen einer zip-Datei wird gestartet.

Lightbox auf Website runterladen

Extrahieren bzw. entpacken Sie die zip-Datei und Sie erhalten:

ein html-Dateien
drei Ordner (css / images / js)

Die index-html-Datei beinhaltet eine Erklärung (auf Englisch) wie Sie Lightbox auf Ihre Website einbinden.

Ansicht der heruntergeladenen Lightbox-Dateien und dazugehörigen Ordner

Lightbox integrieren und aktivieren

Zuerst kopieren Sie die entpackten Ordner css, images und js von Lightbox in Ihren Hauptordner.

Lightbox-Ordner in Hauptordner für die Bildergalerie kopieren

In dem images-Ordner sind Icons für die Bildergalerie enthalten.

Ansicht des Lightbox-images-Ordners

(Hier können Sie gerne die Beispielbilder donate-button.gif, images-1.jpg und thumb-1.jpg löschen)

Um dem Tag

<a href>

die Aktivierung für Lightbox mit zu geben, müssen Sie diesen Tag um den Attribut „rel=“lightbox““ erweitern.

Lightbox im HTML-Code integrieren

Um die Verknüpfung mit Lightbox zu vervollständigen benötigen Sie die Skriptbefehle für JavaScript die Sie in den der index.html-Datei kopieren (diesen Code finden Sie in der ursprünglichen index.html-Datei von Lightbox oder auf der Website – diesen 1:1 kopieren und einfügen).

Lightbox-JavaScript-Code in HTML einbinden

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Ebenfalls machen Sie das mit dem css-Verweis.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Lightbox ist nun aktiviert!

Das Ergebnis sieht beim Anklicken eines Miniaturbildes in Firefox wie folgt aus:

Browser-Ansicht nach Aktivierung und Integrierung von Lightbox

Erweiterung [ ] für mehrere Bilder zu einem Thema

Wenn Sie mehrere Bilder zu einem Thema haben und innerhalb dieses Themas von einem Bild zum nächsten blättern möchten, können Sie dem rel=“lightbox“-Attribut mit einer eckigen Klammer einen Themennamen (z.B. [stadt] oder [tuebingen] usw.) geben.

In der index-html-Datei sieht dies dann so aus:

Lightbox-HTML-Code für Bilder zu einzelnen Themen zum „Weiterblättern“

In Firefox haben Sie dann folgende Ansicht:

Browser-Ansicht für Bilder benannt nach Themen - mit „Next“ zum Weiterklicken

Browser-Ansicht für Bilder benannt nach Themen - mit „Prev“ zum Zurückblättern

Bildbeschriftungen: Hinweis zu den Attributen „title“ und „rel“

Den Titel können Sie über „title“ nach Belieben vergeben. Da Sie von Beginn an dem jeweiligen Bild einen Titel zugewiesen haben erscheint dieser wenn das große Bild geöffnet wird links unten.

Wenn Sie Bilder zu einem Thema anschauen und in diesen „blättern“ wollen, dann muss im „rel“ in der eckigen Klammer immer der gleiche Themenname stehen.

vorheriges Kapitel: fremde Bilder

nächstes Kapitel: Bildbearbeitung mit GIMP