 |
 Alle Anleitungen Diese und weitere Anleitungen finden Sie unter http://stellatest.de/anleitungen |
Lightbox (ab HTML5 gibt es bessere Lösungen)
Mit der Funktion Lightbox lassen sich Bilder im Lichtkasten gleitend in der Höhe und der Breite ausfahren. Klicken Sie auf nebenstehende Bild, um den Effekt zu betrachten.
Die Version Lightbox 2 ermöglicht es, neben Grafiken auch Bilderserien mit Navigationstasten zu realisieren. Viele Lightbox-Lösungen beruhen auf Lightbox JS von Lokesh Dhakar (http://lokeshdhakar.com/projects/lightbox2/) sowie den Javascript-Bibliotheken Prototype und Scriptaculous. Die Lightbox-Funktion kann ohne großen Aufwand auf einer Seite eingebaut werden.
Eine Beispielseite mit allen benötigten Scripts und Dateien können Sie hier unter http://stellatest.de/anleitungen/homepage/lightbox/lightbox_js_css.zip herunterladen.
Zur Darstellung von Filmen, Texten, Musik in einer Lightbox finden Sie eine Beschreibung unter http://www.pa-s.de/php/codeschnipsel-Multibox-Multimedia-Lightbox-60.php
Skriptverlinkung ohne Download
Wenn Sie die Lightboxscripts dieser Anleitung direkt benutzen wollen ohne die Skripts auf Ihre Homepage hochzuladen, können Sie folgende Verlinkungen in den Headbereich Ihrer Homepage einbauen. Sie müssen dann lediglich, so wie weiter unten erklärt, in Ihren Link zum Aufruf des Bildes "rel=lightbox" eingeben.
Code für Verlinkung im Headbereich ohne Kopie der Scripts auf Ihre Seite:
<script src="http://stellatest.de/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://stellatest.de/js/lightbox.js" type="text/javascript"></script>
<link href="http://stellatest.de/css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
Bilder vorbereiten
Sie benötigen idealerweise jedes Bild in zwei Größen. In der sogenannten Thumbnailansicht werden die Bilder auf der Webseite klein dargestellt. Nach Klick auf das Bild öffnet sich das größere Bild.
Erstellen Sie mit einer Grafiksoftware eine mittelgroße und eine kleine Version des jeweiligen Einzelbildes oder aller Grafiken einer Galerie.
Kostenlose Programm wie -> irfanview leisten hier wertvolle Dienste.
Bilder verlinken
Ein einzelnes Bild verlinken Sie nach dem folgenden Muster im Lightbox-Stil. Im Element [title="..."] fügen Sie dem Bild einen Bildtext hinzu.
Der Parameter rel="lightbox" sorgt für den Aufruf des Effekts. Mehrere Bilder fassen Sie mit einem zusätzlichen Gruppennamen, den Sie in eckigen Klammern ergänzen, zu einer Galerie zusammen. Erweitern Sie den Code dazu wie folgt:
Codebeispiel:
Starten Sie das Lightbox-Album, indem Sie eines der Vorschaubilder auf der Webseite anklicken. Sobald Sie die Maus zum jeweiligen Rand der Lightbox führen, erscheinen Buttons zum Vor- und Zurückblättern. Mit dem Parameter title beim a-Tag fügen Sie Untertitel zu den Grafiken hinzu.
Alternative
Scripts auf der eigenen Homepage installieren
Lightbox 2.0 herunterladen
Laden Sie die Scriptdateien von Lightbox 2.0 hier unter http://stellatest.de/anleitungen/homepage/lightbox_js_css.zip herunter. Entpacken Sie die Zip-Datei und kopieren Sie die Ordner "js" und "css" in den Ordner, in dem auch Ihre Homepage liegt. In einem CMS-System ist dies der Templateordner des Templates, das sie benutzen.
Scriptverlinkung im Headbereich
Damit die Lightbox funktioniert, müssen Sie auf der Seite, auf der Sie die Lightbox nutzen wollen vier Links einfügen. Einen Link auf die Scirptdatei "prototyp.js", einen auf "scriptaculous.js", sowie einen Link auf "lightbox.js". Ein weiterer Link bindet die CSS-Datei "lightbox.css" ein. Fügen Sie folgende Links in den Head-Bereich Ihrer Webseite ein:
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Passen Sie die Pfade der Skriptfiles (z.B. in der Datei lightbox.js in der Zeile 48 und 49) und der CSS-Datei gegebenenfalls an. Sie können hier komplette Serverpfade eingeben (http://.../js/...) oder relative Pfade.
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).