Skriptergänzung (finale Version)

[bosselmann]

Also ich habs gelöst. Für interessierte der geänderte Code:

FaderFramework.init({  
                id: "fader",  
                ads: [  
                         {  
                         image: "bild1",  
                         href: "http://link1.com/",  
                         title: "Titel von bild1"  
                         }  
  
                         ,  
  
                         {  
                         image: "bild2",  
                         href: "http://link2.com/",  
                         title: "Titel von bild2"  
                         }  
  
                         [...]  
                     ],  
                fadeStep: 2,  
                random: false,  
                viewTime: 10000  
            });

Und das geänderte Framework:

Fader: function (einstellungen) {  
    /*  
        In diesem Konstruktor verweist "this" immer auf das zu erzeugende Objekt - vorausgesetzt,  
        dieser Konstruktor wird mit dem Schlüsselwort "new" aufgerufen, z.B. var a = new this.Fader()  
    */  
  
        // wie "einstellungen" aussehen muss, siehe Funktion "init"!  
        var className, imgs, i, r, vorhanden;  
  
        // Darf eventuell kein Fader eingerichtet werden?  
        if (  
            // keine ID (oder ein Leerstring) übergeben  
            !einstellungen.id  
            ||  
            // kein HTML-Element mit dieser ID vorhanden  
            !document.getElementById(einstellungen.id)  
            ||  
            // für diese ID ist bereits ein Fader eingerichtet  
            FaderFramework.faders[einstellungen.id]  
            ||  
            // weniger als zwei Bilder angegeben  
            einstellungen.ads.length < 2  
        ) {  
            // also gibt es keinen Fader für diesen init-Aufruf  
            return false;  
        }  
  
  
        // Einstellungen des Faders vornehmen  
        this.id = einstellungen.id;  
        this.ads = einstellungen.ads;  
        this.images = new Array(); // Bilder werden hier nicht als Zeichenketten, sondern später als HTML-Elementobjekte abgelegt...  
        this.random = einstellungen.random ? einstellungen.random : FaderFramework.random;  
        this.autostart = (typeof(einstellungen.autostart) != "undefined") ? einstellungen.autostart : FaderFramework.autostart;  
        this.viewTime = einstellungen.viewTime ? einstellungen.viewTime : FaderFramework.viewTime;  
        this.fadeStep = einstellungen.fadeStep ? einstellungen.fadeStep : FaderFramework.fadeStep;  
        this.stopped = false; // hiermit kann später der Fader angehalten werden  
        this.playList = new Array(); // Wiedergabeliste  
        this.oldPlayList = [0]; // vorherige Wiedergabeliste (besteht aus einem einzigen Bild)  
        this.counter = 0; // aktuell angezeigtes Bild (Zähler für Playlist)  
  
  
        // DOM-Baum des HTML-Dokumentes auf den Fader vorbereiten  
  
        // <a>-Element als Container erzeugen und mit der Fader-Klasse ausrüsten  
        this.element = document.createElement("a");  
        this.element.className = FaderFramework.className;  
  
        // vor das ursprüngliche Bild setzen  
        i = document.getElementById(this.id); // ursprüngliches Bild  
        i.parentNode.insertBefore(this.element, i);  
  
        // ursprüngliches Bild entfernen  
        i.parentNode.removeChild(i);  
  
        var a, img;  
        // Bilder aus der Liste zu echten Bildobjekten machen und ins <span>-Element einhängen  
        for (i = 0; i < einstellungen.ads.length; i++) {  
  
            this.ads[i].img = document.createElement("img");  
            this.ads[i].img.src = einstellungen.ads[i].image;  
            this.ads[i].img.alt = einstellungen.ads[i].title;  
  
            if (i > 0) {  
            this.ads[i].img.className = "next";  
            }  
            this.ads[i].img.style.opacity = "0";  
            // IE?  
            this.ads[i].img.style.filter = "alpha(opacity=0)";  
            this.ads[i].img.style.border = "0";  
  
    this.element.appendChild(this.ads[i].img);  
}  
  
##[...}##  
  
this.fade = function (step) {  
            var imgs = new Array(), v;  
  
            // Wenn kein Wert übertragen wurde, dann muss das Fading von vorne durchgeführt werden  
            step = (!step) ? 0 : step;  
            if (step == 0)  
                 {  
                 this.element.removeAttribute("href");  
                 }  
            // Das letzte Bild steht in der Liste vor dem aktuellen (falls dieses ganz am Anfang steht, gilt das letzte der alten Playlist)  
            imgs[0] = (this.counter == 0) ? this.ads[this.oldPlayList[this.oldPlayList.length -1]].img : this.ads[this.playList[this.counter -1]].img;  
            // Das neue Bild ist das, auf welches der Counter zeigt  
            imgs[1] = this.ads[this.playList[this.counter]].img;  
            for (i = 0; i < imgs.length; i++) {  
                v = (i == 0) ? (100 - step) : step;  
                imgs[i].style.opacity = v/100;  
                // IE?  
                if (imgs[i].style.filter != "undefined") {  
                    imgs[i].style.filter = "alpha(opacity=" + v + ")";  
                }  
            }  
  
            step += this.fadeStep;  
  
            if (step <= 100) {  
                // nächsten Fade-Schritt ausführen  
                window.setTimeout(""  
                    + "FaderFramework.faders."  
                    + this.id  
                    + ".fade("  
                    + step  
                    + ");",  
                1);  
            } else {  
                // Bildübergang abgeschlossen -> nach der Pause nächstes Bild  
                this.element.href = einstellungen.ads[this.playList[this.counter]].href;  
                this.element.title = einstellungen.ads[this.playList[this.counter]].title;  
                window.setTimeout(""  
                    + "FaderFramework.faders."  
                    + this.id  
                    + ".next();",  
                this.viewTime);  
            }  
        };

Außerdem müssen alle this.images.length durch this.ads.length ersetzt werden.

Grüße Dominik