Anleitung
1. Installation:
Über den Link wird die Datei hbSlideShow.php (im Ordner hbSlideShow) aufgerufen. Der Link hat folgendes Aussehen:
Über den Parameter p= ... wird der Pfad zum Bilder-Ordner angegeben. Außer dem Parameter p können (optional) weitere Parameter angegeben werden:
Beispiel-Link mit allen Parametern:
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.
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.min.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.
Die Media-Query @media(max-width: 999px) entscheidet, ob die mobile Version oder die Desktop-Version angezeigt wird. Diese Media-Query kann nach eigenem Gutdünken geändert 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
- ZIP-Datei entpacken und den Ordner hbSlideShow hochladen - fertig!
- In die eigene Webseite einen Link einbauen - fertig!
Ü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:
| Parameter | Bedeutung |
| 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.JPG | Aufstieg zur Escherhütte |
| 03_IMG4892.JPG | Blick ins Tal |
| 01_IMG5439.JPG | Marmolada-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.min.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.
Die Media-Query @media(max-width: 999px) entscheidet, ob die mobile Version oder die Desktop-Version angezeigt wird. Diese Media-Query kann nach eigenem Gutdünken geändert 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