Moni: Komfort-Fader (mit zufälliger Bilderreihenfolge)

Beitrag lesen

Hallo Zusammen,

ich benötige eine zufällige Reihenfolge einer selbststartenden Slideshow, die per Fader überblendet werden.

Hierhabe ich mich durchgequält und es funktioniert auch alles, außer dass die Bilder nicht zufällig ausgegeben werden.

Leider Bin ich absoluter Laie und komme seit Stunden keinen Schritt mehr weiter.

Also, in meiner HTML Datei steht im Headbereich dies:

<script type="text/javascript" src="fader-framework/fader-framework.js"></script>  
<script type="text/javascript">  
	FaderFramework.init({  
	id: "fader",  
	images: [  
		"banner/01.jpg",  
		"banner/02.jpg",  
		"banner/03.jpg",  
	],  
	viewTime: 1000,  
	fadeStep: 0.2,  
	random: true,  
	autostart: true  
	});  
</script>

Im Bodybereich:
<img src="" id="fader" />

JS-Datei:

var FaderFramework = {  
  
    oldWinOnLoad: false,  
    inits: new Array(),  
    faders: new Object(),  
  
    init: function (einstellungen) {  
        var fader;  
  
        if (this.inits) {  
            this.inits[this.inits.length] = einstellungen;  
  
        } else {  
            fader = new this.Fader(einstellungen);  
  
            if (fader != false && !this.faders[fader.id]) {  
                this.faders[fader.id] = fader;  
                window.setTimeout(function () {    fader.next(); }, fader.viewTime);  
            }  
        }  
    },  
  
    start: function () {  
        this.oldWinOnLoad = window.onload;  
  
        window.onload = function () {  
            if (typeof(FaderFramework.oldWinOnLoad) == "function") {  
                FaderFramework.oldWinOnLoad();  
            }  
            FaderFramework.onload();  
        };  
    },  
  
    onload: function () {  
        var i, fader, e = document.createElement("link");  
        e.type = "text/css";  
        e.rel = "stylesheet";  
        e.href = "fader-framework/fader-framework.css";  
        document.getElementsByTagName("head")[0].appendChild(e);  
  
        fader = this.inits;  
        delete this.inits;  
  
        for (i = 0; i < fader.length; i++) {  
            this.init(fader[i]);  
        }  
    },  
  
    Fader: function (einstellungen) {  
        if (!einstellungen.id || !document.getElementById(einstellungen.id)  
            || FaderFramework.faders[einstellungen.id]  
            || einstellungen.images.length < 2) {  
  
            return new Boolean(false);  
        }  
  
        var i, original = document.getElementById(einstellungen.id);  
  
        this.id = einstellungen.id;  
        this.images = new Array();  
        this.counter = false;  
  
        this.element = document.createElement("span");  
        this.element.className = "fader";  
        original.parentNode.replaceChild(this.element, original);  
  
        for (i = 0; i < einstellungen.images.length; i++) {  
            this.images[i] = document.createElement("img");  
            this.images[i].src = einstellungen.images[i];  
            this.images[i].alt = "Bild";  
  
            if (i == 0) {  
                this.element.appendChild(this.images[i]);  
            }  
        }  
  
        this.fade = function (step) {  
            var fader = this, imgs = this.element.getElementsByTagName("img");  
  
            step = (!step) ? 0 : step;  
  
            imgs[1].style.opacity = step/100;  
            imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?  
  
            step = step + 2;  
  
            if (step <= 100) {  
                window.setTimeout(function () { fader.fade(step); }, 1);  
            } else {  
                imgs[1].className = "";  
                this.element.removeChild(imgs[0]);  
                window.setTimeout(function () { fader.next(); }, 2000);  
            }  
        };  
  
        this.next = function () {  
            this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;  
  
            this.element.appendChild(this.images[this.counter]);  
            this.images[this.counter].className = "next";  
            this.fade();  
        };  
    }  
};  
  
FaderFramework.start();  

CSS-Datei:

.fader {  
    position: relative;  
    display: inline-block;  
}  
  
.fader img {  
    vertical-align: top;  
}  
  
.fader img.next {  
    position: absolute;  
    top: 0;  
    left: 0;  
}

Hat jemand eine Ahnung wo der Fehler der zufälligen Reihenfolge liegt?
Ich bekomme immer die gleiche Reihenfolge ausgegeben ...

Ich danke schon mal im Voraus für eure Gedanken :-)

Viele Grüße
Moni