Im Dokument ist die JavaScript Library und die Style Library für Slideshow einzubinden. Diese können nach eigenen Bedürfnissen angepasst werden.
Beispiel:
<link rel="stylesheet" type="text/css" href="SlideShow.css"> <script type="text/javascript" src="SlideShow.js"></script>
Aufgrund eines Fehlers beim Internet Explorer 6 muss dafür gesorgt werden, dass entweder dem Body Element über Styles das Attribut height=100% zugeordnet wird.
Ohne explizit ein Objekt erzeugen zu müssen bieten wir eine Funktion an, um ein einzelnes Bild anzuzeigen. Der Aufruf erfolgt direkt in einem Anchor ohne spezielle Parameter.
Beispiel:<a href='myimage.jpg'
title='My Title'
onclick='return SlideShowShowSingleImageByAnchor(this);'>
Titel und URL werden aus dem Anchor genommen, für alle anderen Attribute werden
die Standardwerte des SlideShow -Objektes verwendet (Details siehe unten).Titel und URL werden aus dem Aufruf genommen, für alle anderen Attribute werden die Standardwerte des SlideShow -Objektes verwendet (Details siehe unten).
var ss = new SlideShow('MySunsetShow');
Danach kann global auf das Objekt über den Namen zugegriffen werden.alert(MySunsetShow.Image.Array.length +'\n' + MySunsetShow.ImageRoot);Es folge eine Beschreibung der anderen Properties, bei den meisten ist unter normalen Umständen keine Änderung erforderlich. Sind Änderungen für Startwerte immer unpassend, dann sollte die Quelldatei angepasst werden.
| Name | Default | Beschreibung |
|---|---|---|
| CssClassPrefix | 'SlideShow' | Die Formatierung der Bildershow geschieht über CSS, wobei die Klassennamen alle mit dem Prefix gefolgt von Minus beginnen. Um Konfilkte mit existierenden Klassennamen zu vermeiden, kann das Prefix geändert werden. |
| ImageArray | new Array() | Ein Array der Bildnamen für die Liste der URLs der anzuzeigenden Bilder. Zu den Bildnamen wird der Wert von ImageRoot hinzugefügt. |
| ImageObjects | new Array() | Ein Array für die Liste der angezeigten Image-Objects. Wird nur gefüllt, wenn des PreLoadFlag=true gesetzt oder die Methode PreLoad() explizit aufgerufen wird. Wird nicht verwendet, dient ausschließlich dem PreLoad. |
| ImageTitles | new Array() | Ein Array für die Liste der Beschreibungen der anzuzeigenden Bilder. Die jeweilige Beschreibung kann mit dem Bild angezeigt werden. |
| ImageRoot | '' | Wurzelverzeichnis der Bilder. Wird mit den Werten in ImageArray zur URL zusammengesetzt. |
| ImageTitle | 'Diashow' | Fester Wert zur Beschreibung, falls kein Wert im Array ImageTitles verfügbar ist. Sind weder ImageTitle noch ImageTitles gefüllt, dann wird der Dateiname (ohne Erweiterung) angezeigt. |
| ImageTitlePosition | 1 | Wo der Titel angezeigt wird. 0=Aus, 2=unter dem Bild, 3=unter der Navigationsleiste, sonstiges=über dem Bild |
| ImageDivId | 'ImageDivFull$'+Name | Id des dynamisch erzeugten <div>, in dem das Bild angezeigt wird. Di Id kann geändert werden, um eventuelle Konflikte zu vermeiden. |
| BlackDivId | 'ImageDivBlack$'+Name | Id des dynamisch erzeugten <div>, das teiltransparent über die Seite und unter das Bild gelegt wird. Die Id kann geändert werden, um eventuelle Konflikte zu vermeiden. |
| ImageShowNumber | true | Normalerweise wird im Titel auch Bildnummer und Gesamtzahl angezeigt. Das kann unterdrückt werden. |
| ImageWidth | 840 | Breite der Anzeige für alle Bilder. Sollte vor dem ersten Aufruf auf das Maximum aller Bilder aus der Liste gesetzt werden. |
| ImageHeight | 640 | Höhe der Anzeige für alle Bilder. Sollte vor dem ersten Aufruf auf das Maximum aller Bilder aus der Liste gesetzt werden. |
| NavigateNextText | Weiter>> | Text für die Weiter-Navigation. Wird nicht angezeigt, wenn das Icon gesetzt ist. |
| NavigatePrevText | <<Zurück | Text für die Beenden-Aktion. Wird nicht angezeigt, wenn das Icon gesetzt ist. |
| NavigateCloseText | Schließen | Text für die Zurück-Navigation. Wird nicht angezeigt, wenn das Icon gesetzt ist. |
| NavigateNextIcon | 'NextIcon.png' | URL zum Icon für die Weiter-Navigation. |
| NavigatePrevIcon | 'PrevIcon.png' | URL zum Icon für die Beenden-Aktion. |
| NavigateCloseIcon | 'CloseIcon.png' | URL zum Icon für die Zurück-Navigation. |
| PreLoadFlag | false | Ob nach dem Erstellen des Bilderfeldes die Bilder schon geladen werden sollen, Default false. |
| WaitCount | 0 | Nur für Einzelbild-Anzeige, bei denen Breite und Höhe automatisch ermittelt werden. Dazu muss gewartet werden, bis das Bild komplett geladen ist. Das passiert in einer Schleife, die mit diesem Wert initialisiert wird. |
| WaitCountMax | 35 | Wir oft maximal auf das Laden gewartet wird. |
| WaitCountDelay | 100 | Wieviel Zeit in Millisekunden gewartet wird. |
| SingleImageMarginX | 20 | Nur bei Einzelbildern kann man angeben, wie breit der Rand gemacht werden soll. |
| SingleImageMarginY | 0 | Nur bei Einzelbildern kann man angeben, wie breit der Rand gemacht werden soll. |
Diese Methode kann man verwenden, wenn alle Anker die zur Anzeige notwendigen Informationen wie href und optional titel haben. Der Aufruf dieser Methode sucht alle Anker, der rel-Attribut den Namen des Objektes hat, füllt mit den Anker-Informationen die Felder ImageArray und ImageTitles und modifiziert den onklick-Event des Ankers. Diese Methode darf erst aufgerufen werden, wenn das Dokument vollständig geladen ist, also beispieslweise im body onload-Event.
Beispiel für einen Anker
<a href="http://google.de/logo.gif" title="Google Logo" ref="MySlideShowAutoInit">
Beispiel für eine Funktion, Aufruf im <body onload="SlideShowInitByAnchor()">
function SlideShowInitByAnchor() {
var ss = new SlideShow('MySlideShowAutoInit');
ss.ImageTitle = 'Farben im Querformat';
ss.ImageWidth = 440;
ss.ImageHeight = 500;
ss.InitByAnchors();
}
Achtung: Name des Objektes und rel-Attribut müssen identisch sein.
Der Aufruf dieser Methode started die Bildergalerie und springt zum Bild mit der Nummer. Die vorher beschriebene Methode InitByAnchors führt alle notwendigen Änderungen am Dokument selbst durch und modifiziert die entsprechenden Anker. Man kann aber auch die notwendigen Schritte manuell durchführen und dann eine Bildergalerie starten:
Beispiel zum Initialisieren der Galerie:
function SlideShowInitByArray() {
var ss = new SlideShow('MySlideShowArrayInit');
ss.ImageTitle = 'Farben sind schön';
ss.ImageWidth = 640;
ss.ImageHeight = 400;
ss.ImageRoot = "http://Mydom.de/AllImages/"
ss.ImageArray[0] = "red.gif";
ss.ImageArray[1] = "blue.gif";
ss.ImageArray[2] = "green.gif";
ss.ImageTitles[0] = "Bild Titel Rot";
ss.ImageTitles[1] = "Bild Titel Blau";
ss.ImageTitles[2] = "Bild Titel Grün";
ss.PreLoad();
}
Beispiel zum Starten der Galerie:
MySlideShowArrayInit.GotoImage(0);
Das Starten kann in jedem beliebigen Objekt gestartet werden. Optimal ist ein Link zum Zielbild, weil dann selbst bei deaktiviertem JavaScript das gewünschte Bild angezeigt wird.
<a href="http://Mydom.de/AllImages/blue.gif" onclick="return MySlideShowArrayInit.GotoImage(1);">
Die Stylesheets werden in einer separaten Datei gepflegt, die folgenden Klassen sind definiert:
| Klasse | Beschreibung |
|---|---|
| SlideShow-Table | Das Bild wird ein einer Tabelle mit 3 Zeilen angezeigt für Titel, Bild und Navigation. |
| SlideShow-Navigation | Die Navigation wird in einer Tabelle mit 3 Spalten angezeigt für Zurück, Schließen und Weiter. Die Anzeige für Zurück- und Weiter-Schaltflächen oder Texte werden über diese Klasse gesteuert. |
| SlideShow-Close | Die Anzeige für die Schließen-Schaltflächen oder den Text werden über diese Klasse gesteuert. |
| SlideShow-Title | Formatierung der Titelzeile. |
| SlideShow-Black | Formatierung des DIV-Bereichs, der die Seite abdeckt. |
| SlideShow-Image | Formatierung des DIV-Bereichs, der das Bild mit der Titelleiste und Navigation enthält. |
Der Klassennamen-Präfix kann angepasst werden, wenn man den Objektparameter CssClassPrefix setzt. Damit kann man die Ansicht für verschiedene Bildergalerien in einer CSS-Datei pflegen.
Die Bilder können über die Schaltknöpfe gesteuert werden, aber auch über Tasten:
| Kommando | Tastenkombination |
|---|---|
| Schließen | Esc oder Entf |
| Nächstes Bild | -> |
| Vorheriges Bild | <- |
| Erstes Bild | Hoch oder Bild hoch oder Pos 1 |
| Letztes Bild | Runter oder Bild runter oder Ende |