>

www.peterberger.at > BB Template "JS Slideshow"
BB template "JS Slideshow"
[ Allgemeines ] [ Download ] [ HTML-Erstellung ] [ Anpassen ] [ Beispiel ]
Allgemeines
Das ist ein HTML Template für den Bildbrowser BreezeBrowser. Mit diesem Template lässt sich eine Javascript Slideshow (Diaschau) automatisch erstellen. Natürlich muss der BreezeBrowser (Version 2.8 oder höher) zuerst installiert werden bevor man das Template anwenden kann. Man muss die Software nicht gleich kaufen, die Testversion hat alle Funktionen die man braucht, jedoch ist die maximale Anzahl der Bilder eingeschränkt. Mein HTML Template "JS Slideshow" ist gratis. Das Original-Skript kommt von www.codelifter.com.
Δ

Download
Das Template "JS Slideshow" wird installiert indem die Datei js_slideshow.zip auf die Festplatte geladen und anschließend in den Templatefolder (üblicherweise in C:\Programme\BreezeSys\BreezeBrowser\templates) extrahiert wird. Am Ende sollte sich das Directory "js_slideshow" im Templatefolder befinden.
Δ
HTML-Erstellung
Um das Template zu verwenden sollte man sich vorher mit dem HTML-Generator des BreezeBrowsers vertraut machen. Die (englischen) Hilfeseiten sind online.
click to enlarge...
Ab Version 2.8 des BreezeBrowsers gibt es zwei Template-spezifische Eingabefelder im HTML-Dialogfenster. Das JS Slideshow-Template nutzt diese zwei Variablen um die (Quelle der) Bildtitel und die Bildwechselgeschwindigkeit festzulegen. Unten im HTML-Dialogfenster findet man zwei Drop-down Listen: "Caption" auf der linken Seite und "Image delay" rechts.

Die Datei fullsize_template.htm ist übrigens absichtlich leer. Das eizige HTML File, das generiert wird, ist index.htm. Die kleinen Vorschaubilder (Thumbnails) werden auch nicht benötigt. Sie können ignoriert oder gelöscht werden.

Die Diaschau macht sich besonders gut, wenn alle Bilder das gleiche Seitenverhälnis haben. In diesem Fall sind die generieren Bilder nämlich alle gleich groß und es kommt zu keinen "Sprüngen" bei Bildübergängen.
Δ

Anpassen
Einfach die Datei index_template.htm in einem Texteditor öffnen und einmal darin umsehen. Mit ein bisschen Grundwissen in CSS and HTML sollte man in der Lage sein die Seite zu adaptieren. Die Variable "SlideShowSpeed" kann im HTML-Dialogfenster eingestellt werden.

Der Vorteil dieser Javascript Slideshow ist die einfache Integration in bestehende HTML-Seiten (siehe z.B. die wechselnden Bilder unten und ganz oben auf dieser Seite). Um diesen Schritt zu erleichtern habe ich ein abgespecktes Index-Templatefile beigefügt (index2_template.htm). Nach der HTML-Generierung heisst diese Datei index2.htm. Um sie in eine bestehende Seite zu integrieren muss man den Javascript-Code in den Seitenheader kopieren, den onLoad-Funktionsaufruf zum Body-Tag hinzufügen und schließlich das Bild in the HTML Code einfügen

Zu beachten ist, das alle Bilder zuerst geladen werden, bevor die Diashow startet. Um die Besucher darauf aufmerksam zu machen wird ein animiertes "Loading..." GIF angezeigt bis alle Bilder fertig geladen sind.
Δ

Beispiel
Beispiel anzeigen... Diese Beispiel-Diashow zeigt 6 Bilder in einer Endlosschleife. Ein Klick auf das rechte Thumbnail zeigt eine große Version in einem neuen Fenster. Bei Verwendung des Internet Explorers sieht man einen fließenden Übergang zwischen zwei Bildern. Das wird durch ein Microsoft-Filter erreicht, deswegen das Wortspiel "Fun with filters". Die verwendeten Cokin Filter und die Kameraeinstellungen bleiben jedoch ein Geheimnis... :-)
Δ

Diese Seite auf English...