Galerie mit der Lightbox JS v2.0

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Galerie mit der Lightbox JS v2.0

Beitrag von Admin » Di 19. Aug 2014, 16:21

Dieses Tut beschreibt den Einbau der Lightbox mittels KompoZer/Notepad++. Grundlagen und die Vorlage findest du unter http://www.phpblogger.net/2007/07/10/li ... 2-deutsch/. In der ZIP-Datei findest du eine einfache Anleitung.

Zum einfacheren Upload erstellst du einen Ordner (hier "galerie-lb") in dem alles eingepflegt wird was du zu einer funktionierenden Galerie benötigst. Lade die ZIP-Datei von der oben genannten Webseite herunter und entpacke sie. Kopiere nun die Ordner css, images und js nach galerie-lb. Die Ordner css und js lässt du unberührt. In den Ordner images kopierst du deine, für die Galerie vorgesehenen, Bilder und deren Thumbnails.

Wenn du erst einmal dieses Tut nachbauen willst, so kannst du dir die Bilder als ZIP-Datei hier herunter laden.

Öffne im KompoZer eine neue Datei und speichere sie als "index.html" direkt im Ordner galerie-lb ab. Füge jetzt die Thumbnails (bei den Beispielbildern erkennst du sie am _t im Dateinamen) in die index.html ein. Danach klickst du jedes Bild mit der rechten Maustaste an und gehst auf "Link erstellen". Im sich öffnenden Fenster legst du das zum Thumbnail dazu gehörende Bild fest und bestätigst mit OK.
Speichere ab und öffne mittels F6 das Notepad++. Markiere den folgenden Code und füge ihn vor </head> ein.

Code: Alles auswählen

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
Nun musst du entscheiden ob du Einzelbilder oder einen Rundgang durch die Bilder anbieten möchtest.

Vorgehen bei Einzelbilder
Jetzt suchst du den Link vom ersten Bild hier

Code: Alles auswählen

<a href="images/kirche3.jpg">
und erweiterst ihn wie folgt

Code: Alles auswählen

<a href="images/kirche3.jpg" title="Mein Titel"
 rel="lightbox">
Den Inhalt von title musst du entsprechend deinen Gegebenheiten anpassen.

Vorgehen bei Rundgang
Jetzt suchst du den Link vom ersten Bild hier

Code: Alles auswählen

<a href="images/kirche3.jpg">
und erweiterst ihn wie folgt

Code: Alles auswählen

<a href="images/kirche3.jpg" title="Mein Titel"
 rel="lightbox[rundgang]">
Den Inhalt von title musst du entsprechend deinen Gegebenheiten anpassen.

Diese Änderungen führst du nun analog bei den restlichen Bilder durch. Und fertig ist die Galerie. Nun brauchst du nur den Ordner "galerie-lb" auf deinen Server laden und bei schon vorhandenen Seiten die Galerie einbinden.

Hier findest du ein sehr einfaches Beispiel und unten noch den Quelltext zur Kontrolle.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>lightbox</title><script
 type="text/javascript" src="js/prototype.js"></script><script
 type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script
 type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
 media="screen"></head><body>Anwendung
-- Einzelbilder<br><br><a href="images/kirche3.jpg" title="Mein Titel"
 rel="lightbox"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="kirche"
 src="images/kirche3_t.jpg"></a><a href="images/lok_bild.jpg"
 title="Mein Titel" rel="lightbox"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="lok_bild"
 src="images/lok_bild_t.jpg"></a><a href="images/lok_holz.jpg"
 title="Mein Titel" rel="lightbox"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="lok_holz"
 src="images/lok_holz_t.jpg"></a><a href="images/mauer.jpg"
 title="Mein Titel" rel="lightbox"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="mauer"
 src="images/mauer_t.jpg"></a>
<br><br><br> Anwendung -- Galerierundgang
<br><br><a href="images/kirche3.jpg" title="Mein Titel"
 rel="lightbox[rundgang]"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="kirche"
 src="images/kirche3_t.jpg"></a><a href="images/lok_bild.jpg"
 title="Mein Titel" rel="lightbox[rundgang]"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="lok_bild"
 src="images/lok_bild_t.jpg"></a><a href="images/lok_holz.jpg"
 title="Mein Titel" rel="lightbox[rundgang]"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="lok_holz"
 src="images/lok_holz_t.jpg"></a><a href="images/mauer.jpg"
 title="Mein Titel" rel="lightbox[rundgang]"><img
 style="border: 2px solid ; width: 93px; height: 60px;" alt="mauer"
 src="images/mauer_t.jpg"></a> </body></html>
Dieses Tutorial wurde am 28.04.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten