Dokumentation des Image Fader Version 0.2.

Der Image Fader kann hier runter geladen werden:
Image Fader V0.2

Der Image Fader ist ein Javaskript, welches es ermöglicht, Bilder nacheinander an zu zeigen. Der Bildwechsel wird mit einem Transparenzübergang bewerkstelligt.

Neben der üblichen Verwendung des Javaskripts, besteht auch die Möglichkeit den Image Fader für Redaxo als Modul einzubinden. Deshalb wird im Folgenden die Einbindung des Image Faders in Redaxo sowie die Einbindung in normalen HTML-Code beschrieben.

Die Beschreibung richtet sich an Webseiten-Entwickler - Technische Grundlagen werden nicht beschrieben.

Einbindung in Redaxo

Dem Download liegt jeweils eine Textdatei für die Modulaus- und Eingabe bei. Es muss ein neues Modul angelegt werden und der Inhalt der Dateien „redaxo_eingabe_modul.txt" und „redaxo_ausgabe_modul.txt" in die jeweiligen Felder kopiert werden.

Das Javskript muss in das Template eingebunden werden, in welchem später auch der „Image Fader" angezeigt werden soll.

Die CSS-Datei „style.css", welche ebenso dem Download beiliegt enthält CSS Definitionen (.image_fade_wrapper, .image_fade, .image_fade img, .clear), welche in die CSS-Definition des Templates übernommen werden müssen.

Die Benennung der CSS-Klassen muss beibehalten werden. Um den Image Fader an das eigene Design an zu passen, darf lediglich die Klasse .image_fade_wrapper verändert werden. Hier können border, margin und padding angegeben werden. Mit der Klasse .image_fade kann die Standardgrösse (width und height) des Image Faders vorgegeben werden. Allerdings kann die Größe des Image Faders auch über das Redaxo Modul verändert werden, wodurch die hier angegebenen Werte überschrieben werden.

Die restlichen CSS-Definitionen sollten beibehalten werden.

Einbindung in HTML

Das dem Download beiliegende Javaskript muss in die HTML-Datei eingebunden werden.

Ebenso müssen die CSS-Definitionen aus dem Beispiel CSS („style.css") in die CSS-Definition der HTML-Datei übernommen werden. Die Benennung der CSS-Elemente kann abgeändert werden, wenn die Änderungen der Bezeichner auch im Aufruf des Image Faders übernommen werden.

Die CSS-Definitionen können nach Belieben verändert werden, wenn folgendes beachtet wird:

Die Klasse „.image_fade img" muss folgende Eigenschaften enthalten:

position: absolute;
top: 0;
left: 0;

Die Klasse „.image_fade" muss folgende Eigenschaft enthalten:

position: relative;

Der Image Fader V0.2 arbeitet mit „img"-Elementen, welche dynamisch übereinander gelegt werden. Diese CSS-Definitionen gewährleisten, dass die „img"-Elemente übereinander gelegt werden können.

Der Aufruf des Image Faders kann an jeder beliebigen Stelle in der HTML-Datei durchgeführt werden. An der Position, an welcher der Image Fader erscheinen soll, werden die "div"-Elemente gefolgt von dem Aufruf der Javaskript-Klasse, welche Sie aus der Beispiel-Datei "image_fader.html" entnehmen können, eingefügt.

Wichtig ist, dass ein link um das „img"-Element gelegt wird, wenn der Image Fader die Bilder verlinken soll. Sollen keine Links verwendet werden, darf kein „a"-Element um das „img"-Element gelegt werden.

Beispiel für den Aufruf des Image Faders mit Links:

Quellcode Image Fader mit Link

Beispiel für den Aufruf des Image Faders ohne Links:

Quellcode Image Fader ohne Link