Bild fade to white fade to Bild

Question

Aktuell habe ich ein JavaScript was mir ein Bild weich in ein zweites (drittes, viertes, ...) Bild übergehen lässt. Jetzt möchte ich aber das dass erste Bild erst mal ausgeblendet wird, sozusagen ein fade-to-white macht. Danach soll es weich auf das zweite (dritte, vierte, ...) Bild übergehen. Also Bild, überblende zu weiß, überblende zu Bild. Jemand ne Ahnung wie ich das anstellen kann?

Hier mal der Code von meinem aktuellen Script (Bild fade-to Bild):

var bilderPfad="images/startseite";
var bilderAnzahl=2;

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=true; geschwindigkeit=5000;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// erstes Bild wird eingelesen
bild = d.getElementById("slideshow").getElementsByTagName("img");
bilder[0] = bild[0];
bilder[0].style.display = "block";
bilder[0].xOpacity = .99;

bilder[1] = new Image();
bilder[1].src = bilderPfad + "002.jpg";
bilder[1].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[1]);

setTimeout(so_xfade,geschwindigkeit);
neuesBild();
}

function so_xfade() {
cOpacity = bilder[aktuell].xOpacity;
nIndex = bilder[aktuell+1]?aktuell+1:0;
nOpacity = bilder[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

bilder[nIndex].style.display = "block";
bilder[aktuell].xOpacity = cOpacity;
bilder[nIndex].xOpacity = nOpacity;

setOpacity(bilder[aktuell]);
setOpacity(bilder[nIndex]);

if(cOpacity<=0) {
bilder[aktuell].style.display = "none";
aktuell = nIndex;
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*1000) + ")";
}
}

function neuesBild() {
// immer ein Bild vorausladen
if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
bilder[aktuell+2] = new Image();
bilder[aktuell+2].src = bilderPfad + "0" + ((aktuell+3)<10 ? "0" + (aktuell+3) : (aktuell+3)) + ".jpg"
bilder[aktuell+2].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
}
}

Answer 1

Hier mal der Code von meinem aktuellen Script (Bild fade-to Bild):

Es spricht ja nichts dagegen, kostenlose Scripts zu benutzen,
aber ich finde es ziemlich unfein, zu behaupten, man hätte sie selbst geschrieben.
Insbesondere, wenn im Original darum gebeten wird, die Herkunftsangabe nicht zu löschen.

Zur Frage:
das ist mit einer kleinen Änderung nicht getan, da das script für jedes Bild eine Operation ausführt, nämlich ausblenden, Du möchtest aber zwei Schritte: 1.ausblenden, 2.einblenden.
Du könntest natürlich weisse Bilder einfügen, aber ich nehme an, die weissen Bilder sollen kürzer gezeigt werden als die Fotos.
Eine gepfuschte aber vermutlich funktionierende Lösung wäre, die Funktion so_xfade() zu kopieren und die kopie fürs weiß faden zu benutzen.

Ansonsten müsste viel umgeschrieben werden. Ich vermute mal, für Dich lohnt es sich mehr, ein anderes Script zu suchen, was Deinen Wünschen mehr entspricht.
Gibt bestimmt ne Menge Slider und Fader. Vielleicht mal schauen bei
jquery.com/

Answer 2

Danke kicia für die schnelle Antwort. Du hast natürlich recht, es ist nicht mein eigenes Script, ich meinte mit "meinem" Script nur, das ich dass so verwende. Es kommt auf mehreren Seiten zum Einsatz und natürlich wird da immer auf den Erfinder hingewiesen. Diesen Abschnitt, habe ich hier jetzt einfach mal weg gelassen, weil das eh schon so viel Code ist. Damit es fair bleibt, hier nochmal der Header des Scripts. Und ich ehre auch diese Leute, denn die können was, was ich überhaupt nicht kann.

/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html

modifiziert von Franziska Maelzer: http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-scripting-slideshow
*****/

Und weil ich wie oben geschrieben, mit Java/JavaScript so meine Probleme habe, komme ich mit JQuery auch nicht wirklich klar. Ich hatte mich damit auch schon damals beschäftigt. JQuery ist ja genau das was ich für solche Grafik-Spielereien brauche. Aber ich steig da einfach nicht durch. Deswegen habe ich mein Problem hier im Forum geschildert. In der Hoffnung auf jemanden zu treffen, der einen JavaScript Loser an die Hand nimmt und zeigt wie das geht.