Malte’s Blog

imgFader ist ein schlankes und einfaches JavaScript (2,7 KiB), welches eine plattformunabhängige Slideshow generiert. Dazu ist nur ein Array mit einigen Foto-URLs nötig. Das Script ist sehr geeignet, um eine Diashow zu erstellen oder um seine Website um ein paar dynamische Effekte zu bereichern. Schaut euch diese Beispiele an, um euch zu überzeugen.

Komprimierte Version herunterladen (2,7 KiB)
Quelltext (3,8 KiB)

Falls Ihr auf eurer Homepage schon jQuery einsetzt, kann ich euch das jQuery-Plugin InnerFade empfehlen, welches zahlreiche Einstellmöglichkeiten bietet.

Lizenz

imgFader ist unter der GPL v3 (GNU General Public License) lizenziert. Hier kann eine Kopie heruntergeladen werden.

Unterstützte Browser

imgFader ist plattformunabhängig, also ist es notwendig, dass es von allen gängigen Browsern unterstützt wird. imgFader wurde bereits in folgenden Browser erfolgreich getestet:

• Firefox 2 and 3
• IE 6
• Opera 9

Fade

Initialisiert die Fade-Klasse und liefert ein Objekt zur weiteren Benutzung

Die Image-Box wird automatisch auf position:relative und alle enthaltenen Grafiken werden auf position:absolute gesetzt.

Syntax

var fader = new Fade(’id_of_element’, [options]);

Beispiele

Folgendes initialisiert das Faden mit 3 Grafiken (1.jpg, 2.jpg, 3.jpg) innerhalb des imgContainer-Elements, fadet alle 6 Sekunden für die Dauer von 1 Sekunde in random (zufällige) Anordnung.

var fader = new Fade(’imgContainer’,{imgs:['1.jpg','2.jpg','3.jpg'],mode:’random’,fDur:1,delay:6,clear:true});

Folgendes initialisiert das Faden mit 2 Bildern und behält die Standard-Einstellungen bei. (5 Sekunden Verzögerung, 1 Sekunde Fade-Dauer, gegebene Anordnung)

var fader = new Fade(’imgContainer’,{imgs:['1.jpg','2.jpg','3.jpg']});

Optionen

imgs	Array, welches die Bild-URLs enthält
mode	‘order’ zeigt die Bilder in der gegebenen Anordnung und ‘random’ zeigt die Bilder in zufälliger Anordnung (Standard: order)
fDur	Fade-Dauer (Standard: 1)
delay	Verzögerung zwischen 2 Bildern (Standard: 5)
clear	Definiert, ob die Image-Box geleert werden soll. Andererseits werden die Bilder angefügt. (Standard: true)

Fade.add

Syntax

fader.add(url,[options]);

Beispiele

Folgendes fügt ein viertes Bild zum Ende der Anordnung hinzu und zeigt es unmittelbar an.

fader.add(’4.jpg’,{pos:’end’,immediate:true,force:true});

Folgendes fügt ein Bild an die 3. Position. Das Bild wird gezeigt, sobald das Faden die 3. Position erneut erreicht.

fader.add(’4.jpg’,{pos:3});

Optionen

pos	Position, an der das Bild hinzugefügt werden soll. Mögliche Werte: 1, 3, ‘first‘, ‘end‘. (Standard: end)
immediate	Sofort zum Bild faden. (Standard: false)
force	Bild hinzufügen, auch wenn es zuvor schon einmal hinzugefügt wurde. (Standard: false)

Fade.go

Zu einem bestimmten Bild faden.

Syntax

fader.go(value);

value kann eine absolute Nummer (z.B: 1 or 3) oder ein relativer Wert (z.B. ‘+2‘, ‘-1‘)

Beispiel

<a href=“javascipt:fader.go(1)“>Erstes Bild zeigen</a>
<a href=“javascript:fader.go(’-1′)“>Ein Bild zurück</a>

Fade.preload

Ein bestimmtes Bild preloaden.

Syntax

Fader.preload(img);

img ist die URL des Bildes

Beispiel

fader.preload(’6.jpg’);

Fade.start

Fading starten. Hinweis: Das Faden wird nach der Initialisierung automatisch gestartet. Diese Funktion ist nur sinnvoll, wenn das Faden zuvor gestoppt wurde.

Beispiel

<a href=”javascript:fader.start();”>Start</a>

Fade.stop

Fading stoppen.

Beispiel

<a href=”javascript:fader.stop();”>Stop</a>