imgFader (deutsch)
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)
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>