Sie sind hier: Startseite » HTML-Editor » Lightbox

Lightbox im HTML-Editor

Lightbox

Wie integriert man eine sog. Lightbox im HTML-Editor?
Das Thema wurde bisher noch nicht behandelt.
Gehört es doch mittlerweile beinahe zum Standard
einer Webseite.
Wie das funktioniert, wollen wir Ihnen mit diesem neuen Tutorial einmal zeigen.

Was ist eigentlich eine "Lightbox" ???

.: Die meisten Bilder in dieser Erklärung sind mit dieser Funktion erstellt.

Probieren Sie es einfach mal aus.

Die hier gezeigte Vorgehensweise können Sie in unserem Demo-Editor auch live sehen.

Als Erstes müssen natürlich die beiden Bilder (also das kleine Vorschaubild und das größere Zielbild) über den Filemanager des HTML-Editors hochgeladen werden. In unserem Beispiel hat das Vorschaubild eine Breite von 160px und das Zielbild eine Breite von 600px.

Wir haben eine Tabelle mit einer Zeile und zwei Spalten eingerichtet.
Die Tabellenbreite von einem Pixel belassen wir vorab.
Wo Sie die Schrift bzw. das Bild positionieren bleibt Ihnen überlassen.

.: Anklicken zum Vergrößern

Wir haben jetzt das Vorschaubild eingefügt und rechts ausgerichtet.

.: Anklicken zum Vergrößern

Um an die URL des Zielbildes zu gelangen, haben wir es einfach mal im HTML-Editor eingefügt.
Mit einem Rechtsklick auf das größere Bild öffnen wir das Fenster
"Bild einfügen/Bearbeiten".

Im oberen Bereich kopieren wir unter "Bild-URL" die nun angezeigte Adresse des größeren Bildes.

Dann können wir das Fenster wieder schliessen.

.: Anklicken zum Vergrößern

Mit einem Rechtsklick auf unser Vorschaubild öffnen wir über "Hyperlink einfügen" das entsprechende Fenster und fügen den im Schritt zuvor gespeicherten Link in die Zeile "URL" ein. Unter "Titel" geben Sie eine von Ihnen gewünschte Bildbezeichnung ein.

.: Anklicken zum Vergrößern

Über den oberen Reiter öffnen wir den Dialog "Lightbox" und klicken "öffnen in Lightbox" an.

Bestätigen Sie das ganze mit "OK".

.: Hinweis
(Im Feld "Gruppe" können Sie innerhalb der Lightbox durch eine Bezeichnung wie "b1" oder ähnlich mehrere Bilder zu einer Dia-Show zusammenfassen. Sie müssen allen Bildern, die in dieser Dia-Show erscheinen sollen, die selbe Bezeichnung geben!)

Wir entfernen nun das große Bild wieder aus dem Editor und setzen den Rahmen der Tabelle auf "0" Pixel.

Speichern Sie das Ergebnis und nun müsste es so aussehen.

Bei Rückfragen stehen wir Ihnen gerne zur Verfügung.


Zurück