Komfort-Fader (mit zufälliger Bilderreihenfolge)

[Moni]

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

[Don P]

Hallo,

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

Vom dortigen Code steht auch fast nichts in deinem. random: true allein genügt bei weitem nicht. Deshalb ist die Seite dort ja auch so lang geworden ;) Du solltest die beschriebenen Methoden schon verstehen und auch einbauen.

Was davon hast du denn nicht verstanden? Es ist glaub' ein Tutorial für Fortgeschrittene, gedacht zum Selbststudium. Leichte Kost für Anfänger ist es nicht gerade. Habe mich vor einiger Zeit auch mal durchgearbeitet, uns am Ende war mir auch alles klar. Aber die Erweiterung mit der Zufallsanzeige ist auch für mich neu.

Gruß, Don P

[Moni]

Ich vermute, dass mein Problem bei der "playList" liegt, die nicht in meinem Script vorkommt und die wohl für den "Zufall" verantwortlich ist. Aber ich weiß auch nicht an welcher Stelle diese Angaben eingefügt werden müssen. Ich vermute in der JS- UND in der HTML-Datei ... nur was und wo.

Eben weil ich darin Anfänger bin, dachte ich, dass von euch Cracks, das relativ schnell herausgefunden hätten und mir eben die fehlenden Schnipsel nennen könnten.

Ansonsten habe ich die vollständige JS-Datei, die zum Download zur Verfügung steht abgespeichert und hier auch im Forum angegeben - das würde mich wundern, wenn die nicht korrekt wäre .... (?)

[Don P]

Hallo,

Ansonsten habe ich die vollständige JS-Datei, die zum Download zur Verfügung steht abgespeichert und hier auch im Forum angegeben - das würde mich wundern, wenn die nicht korrekt wäre .... (?)

Du hast nur die Basisversion ohne den Zufalls-Schnickschnack.
Hast vielleicht den falschen Link erwischt. Probier's mal hiermit.

Die Links dort finde ich auch ein bisschen verwirrend. Das hier ist wohl die Demo dazu.

Gruß, Don P

[Moni]

Hallöchen,

genau da lag das Problem ...
Dein link war die richtige JS-Datei!
Datei getauscht und alles lief wie es sollte!

Herzlichen dank fürs Mitdenken!

Viele Grüße
Moni