Sowohl mit dem Greybox – Plugin, als auch mit dem Java Script Lightbox, kann man auf eine schöne Art, Bilder und Photos anschaulicher darstellen.
Die Lightbox gibt es als reine JavaScript Variante, sowie als WordPress – Plugin.
- JavaScript Variante Lightbox JS v2 by Lokesh Dhakar
- WP Lightbox JS WordPress PlugIn by Safirul Alredha
- WP Lightbox JS WordPress PlugIn by m3nt0r.de
Anhand von Beispielen, möchte ich hier kurz erklären, wie man die JavaScript Variante von Lokesh Dhaka einfach in seine Webseite einbinden kann. Sie funktioniert mit allen modernen Browser.
Neu in der Version 2:
- Bilderserien / Fotos in Gruppen
- Visuelle Übergangseffekte
Einbindung des Java Script Lightbox
- Java Script herunterladen und entpacken.
- Auf dem Webserver ein Verzeichnis erstellen, z.B. "lightbox". Diesen Pfad bitte merken, da er noch für einige Einstellungen benötigt wird.
- Im Header der Webseite muss folgender Code eingetragen werden – hier den Pfad zum "lightbox" – Verzeichnis anpassen.
Beispiel Code für den Header:
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/prototype.js"></script> <script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lightbox.js"></script>
- Damit auch die CSS – Datei von Lightbox JS v2 in die Webseite geladen wird, muss sie ebenfalls im Header eingebunden werden.
Beispiel Code für das Laden der CSS – Datei:
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/css/lightbox.css" type="text/css" media="screen" />
- Diese Eintragungen sollten jetzt im Header vorgenommen sein.
Zusammenfassung für den Beispiel Code im Header:
<html>
<head>
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/prototype.js"></script>
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lightbox.js"></script>
</head>
</body>
</html>
- Nun müssen noch die Pfade zu den Bilddateien blank.gif, prevlabel.gif und nextlabel.gif in der lightbox.css angepasst werden. Die Datei öffnen und
Beispiel Code für die lightbox.css:
folgende Zeilen
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
mit den vollständigen Pfadangaben ergänzen.
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://www.deinewebsite.de/pfad/zu/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/nextlabel.gif) right 15% no-repeat; }
- Auch in der lightbox.js müssen noch die Pfade zu den Bilddateien loading.gif and close.gif angepasst werden, also wieder die Datei öffnen und
Beispiel Code für die lightbox.js:
folgende Zeilen var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; mit den vollständigen Pfadangaben ergänzen. var fileLoadingImage = "http://www.deinewebsite.de/pfad/zu/images/loading.gif"; var fileBottomNavCloseImage = "http://www.deinewebsite.de/pfad/zu/images/closelabel.gif";
- Nachdem nun alle Dateien erfolgreich angepasst wurden, müssen diese in das erstellte Verzeichnis auf den Webserver geladen werden.
- So, der schwierigste Teil ist nun geschafft. Wie nutzt man nun Lightbox JS v2 mit seinen Effekten?
- Es gibt zwei Möglichkeiten der Anzeige, entweder als Einzelbild oder als Bilderserie, in der man navigieren kann.
Beispiel 1: Einzelbild
Ausgangs - Bild <a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg"></a> Ausgangs - Text <a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox" title="Description">Klicke diesen Link</a>
Beispiel 2: Bilderserie
Beispiel Code für die Nutzung von lightbox als Bildserie, wobei die Anzahl der Bilder keine Rolle spielt. Wichtig ist nur, darauf zu achten, dass lightbox[serie] überall eingetragen wurde, wobei "serie" durch jedes x – beliebige Wort ersetzt werden kann.
Ausgangs - Bilder
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 1 0f 3 thumb"></a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 2 0f 3 thumb"></a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 3 0f thumb"></a>
Ausgangs - Texte
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 1</a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 2</a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 3</a>
Natürlich kann Lightbox noch an seine Bedürfnisse angepasst werden.
Viel Spass mit dem Java Script und der kleinen Anleitung.
@Mahoon:
Hallo,
sorry, in meine erste Anwort hat sich leider ein kleiner Schreibfehler (bereits korregiert) eingeschlichen.
Anstatt titel= heißt es natürlich title=
Bitte ändere bei Dir mal den Code und gib mir Bescheid, ob das die Ursache war.
Viele Grüße photo pingalerie
Hi!
Ja, das war es. Man soll halt nicht immer strg+c, strg+v machen!!!
Hätte ich selber finden müssen!!!
Ich danke herzlich!
@Mahoon:
S U P E R,
dann hätten wir das also auch hinbekommen.
Viele Grüße photo pingalerie
Mahlzeit,
ich habe mir dieses Plugin vorhin installiert und es funktioniert fast perfekt. Ich habe lediglich ein Problem, beim Betrachten eines Bildes festgestellt. Und zwar verschwindet einfach ein Teil von dem angezeigten Bild in meinem Head Bereich. Das Problem tritt nur auf, wenn das Vorschaubild in meinem Artikel, am Anfang meines Beitrages sitzt. Wenn man meine Seite etwas nach unten scrollt und dann auf das Bild klickt, wird es in der Lightbox vollständig angezeigt. Weißt Du zufällig, wie ich das ändern kann?
@Joachim:
Ich habe mir Deine Seite angeschaut und muss feststellen, dass ich Dein Problem erkannt habe, Dir aber leider nicht weiter helfen kann.
Versuche doch mal bitte Deine Problematik hier anzubringen, vielleicht hast Du dort mehr Erfolg.
Viele Grüße photo pingalerie
hi, ich würde gern die navigation unten neben der Bildbeschreibung haben mit weiter und zurück. hab ich schon gesehen aber wie bzw wo kann ich das ändern? thx schonmal
Hallo!
Ich möchte ebenfalls loswerden, dass das ein schönes und einleuchtendes Tutorial ist!
Ich habe auch soweit ich weiß jeden Schritt verfolgt, aber dennoch funktioniert das ganze nicht richtig bei mir.
Anstatt das Bild nach dem Klicken auf die kleine Version in einer lightbox zu öffnen, wird es auf einer extra Seite geöffnet.
Kann mir jemand sagen, wo der fehler liegt?