Bildwechsel mittels Scriptaculous

[Michael_K]

Hallo,

mit folgender Funktion will ich automatisch ein angezeigtes Bild austauschen:

function imgSlider() {
	Effect.Fade('references');
	document.references.src = "../html/img/pool/"+images[imgNumber];
	Effect.Appear('references');
	imgNumber++;
	if (imgNumber >= imageAmount) {
		imgNumber = 0;
	}
	setTimeout('imgSlider()', 5000);
}

Der Wechsel an sich funktioniert einwandfrei. Jetzt möchte ich die ganze Sache mit Scriptaculous allerdings ein wenig aufhübschen. Und da beginnt der Ärger.

Nach meiner Logik müsste durch meine Funktion 3 Sekunden lang ein Bild angezeigt werden. Dann wird dieses aus- und das nächste Bild eingeblendet, was wiederum 3 Sekunden lang angezeigt wird.
Nur hat mein Browser seine eigene Logik. Er fadet das Bild ein, und kaum ist es geladen, verschwindet es wieder - dann bleibt die Fläche für 3 Sekunden weiß, bis das nächste Bild kurz erscheint.
Wenn ich die beiden Effekt-Befehle entferne, funktioniert alles wie gewollt, nur eben nicht so hübsch.

Wo liegt da mein (Denk-)Fehler?

Grüße
Michael

 

[Sven Mintel]

Moin,

dein Denkfehler liegt darin, dass du davon ausgehst, dass Appear erst gestartet wird, wenn Fade beendet ist.
An dem ist es nicht, das läuft alles gleichzeitig(die Standarddauer bei Effekten ist bei Scriptaculous übrigens 1 Sekunde und nicht 3 Sekunden).

Für das, was du vorhast, benötigst du den Queue

Optimal wäre aber wahrscheinlich, wenn du dies alles über Callback-Funktionen regelst.
Also quasi:

1. wenn Fade fertig, Bild austauschen und Appear aufrufen
2. wenn Appear fertig, Timeout starten

 

[Michael_K]

Hi Sven,

danke für Deinen Hinweis! Wenn ich den Queue wie folgt benutze, wird alles nahezu sauber dargestellt:

function imgSlider() {
	Effect.Fade('references', { queue: 'end', delay: '3' });
	document.getElementById('references').src = "../html/img/references/"+images[imgNumber];
	Effect.Appear('references', { queue: 'front' });
	imgNumber++;
	if (imgNumber >= imageAmount) {
		imgNumber = 0;
	}
	setTimeout('imgSlider()', 5000);
}

Ein Problem gibt es: teilweise wird der Fade-Effekt abgeschnitten. Ich vermute mal, das liegt daran, dass der setTimeout-Zeitwert nicht immer ganz synchron mit der Zeit verstreicht, die meine Funktion braucht.

Vielleicht geht es mit Callback-Funktionen doch besser. Könntest Du mir genauer erklären, wie das ablaufen müsste? Habe mich über diese Funktionsweise informiert, aber verstehe leider nicht ganz, wie ich die konkret auf mein Problem anwenden müsste.