Anleitung 1. Installation:
  • ZIP-Datei entpacken und den Ordner hbSlideShow hochladen - fertig!

2. Einbindung in die eigene Webseite:
  • In die eigene Webseite einen Link einbauen - fertig!
Voraussetzung: Die zu präsentierenden Bilder liegen in einem Ordner, der außer den Bildern keine andere Datei enthält.

Über den Link wird die Datei hbSlideShow.php (im Ordner hbSlideShow) aufgerufen. Der Link hat folgendes Aussehen:
<a href="Pfad/zur/Datei/hbSlideShow.php?p=Pfad/zum/Ordner/Bilder" target="_blank">Bilder anschauen</a>

Über den Parameter p= ... wird der Pfad zum Bilder-Ordner angegeben. Außer dem Parameter p können (optional) weitere Parameter angegeben werden:

ParameterBedeutung
p (path)Pfad zum Bilder-Ordner
h (headline)Headline oben links (default: "SlideShow")
t (text)Pfad und Dateiname der Datei mit den Bildbeschreibungen
d (display time)Anzeigedauer eines einzelnen Bildes in Millisekunden
c (change time)Dauer einer Bildüberblendung in Millisekunden

Beispiel-Link mit allen Parametern:

<a href="hbSlideShow/hbSlideShow.php?p=Bilder&h=Urlaub 2015&t=Bildtexte/Urlaub_2015.txt&d=3000&c=1000" target="_blank">Urlaub 2015</a>

Mit dem Zusatz target="_blank" wird die Slideshow in einem neuen Browserfenster geöffnet. Der "Beenden-Button" bei den Bedienelementen der Slideshow führt dann wieder zur aufrufenden Seite zurück.


3. Erstellen einer Datei mit Bildbeschreibungen:

Man erstellt eine einfache Textdatei, z. B. 'Bildbeschreibungen.txt'.
Jede Zeile der Datei beginnt mit dem Dateinamen eines Bildes, z. B. '01_IMG4136.JPG'. Danach folgt ein TAB (Tabulator-Sprung) als Trennzeichen. Der Rest der Zeile beinhaltet die Bildbeschreibung für dieses Bild.

In den Text der Bildbeschreibung kann man auch HTML einfügen, also <br /> für einen Zeilenumbruch oder auch einen Link. Die Reihenfolge der Bildbeschreibungen ist beliebig.

Es ist auch möglich, mit einem Textverarbeitungsprogramm eine Tabelle zu erstellen wie z. B.

02_IMG4988.JPGAufstieg zur Escherhütte
03_IMG4892.JPGBlick ins Tal
01_IMG5439.JPGMarmolada-Gletscher von der Nordseite aus gesehen

und diese Tabelle anschließend in die Datei 'Bildbeschreibungen.txt' zu kopieren.

Beim Speichern ist darauf zu achten, dass der Editor die Texte im Format UTF-8 abspeichert, damit die Umlaute und Sonderzeichen richtig dargestellt werden!

Möchte man lieber ein anderes Trennzeichen an Stelle von TAB, so kann man am Anfang des Scriptes (Datei SlideShow_min.js im Ordner Script) die Anweisung var TrennString=String.fromCharCode(9) entsprechend ändern, z. B. var TrennString=": " (Doppelpunkt + Leerzeichen).


4. Individuelle optische Gestaltung:

Per CSS können Änderungen am Aussehen der Präsentation nach eigenen Vorlieben vorgenommen werden.
Im Ordner hbSlideShow/CSS ist die Datei SlideShow.css zu finden.

Am Anfang dieser CSS-Datei stehen die Eigenschaften der Elemente #divTextanzeige, #divThumbnail und #divTitel. Hier kann das Aussehen der Bildbeschreibungen, der Headline (oben links) und der Vorschaubilder (thumbnails) geändert werden. Insbesondere kann über die Eigenschaft height des Elements #divThumbnail die Größe der Vorschaubilder dem eigenen Geschmack angepasst werden.

Achtung: Bei allen anderen Elementen der CSS-Datei ist eine Änderung, die den Platzbedarf des Elements beeinflusst (border, margin, padding), nicht möglich, da dies entsprechende Anpassungen im Script erfordern würde!

➥ Anleitung als PDF
hbsoft-ware.de