/* Fader-Framework zum Einrichten von Bilderwechseln */ /* Dank ############################### An dieser Stelle soll auch ein Dank an Felix.Riesterer@gmx.net gehen. Sein Artikel bei SELFHTML war Grundlage für diese JavaScript. Sein Artikel ist hier zu lesen: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/komfort_fader.htm Grundsätzliches zur Verwendung: ############################### Darf ich Code-Beispiele aus SELFHTML auf meiner Homepage einsetzen? Ja. Alle Code-Beispiele in gelben Kästen und/oder blauer Courier-Schrift dürfen Sie in Ihre eigenen Seiten kopieren und dort ohne Herkunftsangabe für eigene Zwecke verwenden und weiterverarbeiten. Dies ist sogar ausdrücklich erwünscht und unterstützt beim effizienten Erstellen eigener Web-Seiten. Eine Ausnahme ist es, wenn Sie selber eine Fachdokumentation oder ein Buch zu einem der in SELFHTML behandelten Themen schreiben und ein oder mehrere Beispiele aus SELFHTML in Ihrer eigenen Dokumentation wiederverwenden möchten. In diesem Fall wenden Sie sich bitte an die SELFHTML-Redaktion (siehe Seite Impressum), und schildern Sie Ihr Vorhaben genau. Eine "automatische Erlaubnis" für ein solches Vorhaben besteht nicht. Quelle: "Häufig gestellte Fragen zu SELFHTML" (http://de.selfhtml.org/editorial/selfhtmlfaq.htm#selfhtmlbeispiele) */ var FaderFramework = { // "Einstellungen" className: "fader", // die Klasse, die unser Element trägt, in dem die Bilder sitzen sollen // Voreinstellungen für einen Fader viewTime: 5000, // Zeit, die ein Bild angezeigt wird (in Millisekunden) fadeStep: 0.5, // Prozent-Schritt beim Überblenden random: false, // Zufällige Reihenfolge der Bilder (true|false) autostart: true, // sofort mit dem Fading starten (true|false) // automatische Einstellungen baseURL: "", // hier steht später der Pfad zum Verzeichnis, in dem sich dieses Script befindet. oldWinOnLoad: null, // hier steht später vielleicht eine abgespeicherte Funktion inits: new Array(), // hier stehen später auszuführende Initialisierungen faders: new Object(), // hier werden die Fader stehen // Initialisier-Funktion - startet das FaderFramework (wird noch während des Ladens der Seite ausgeführt) start: function () { this.oldWinOnLoad = window.onload; // alte onload-Funktion abspeichern (falls vorhanden) // neue (anonyme!) onload-Funktion erstellen um eventuelle alte Funktion(en) zu kapseln window.onload = function () { // War bereits eine Funktion in window.onload abgelegt worden? if (typeof(FaderFramework.oldWinOnLoad) == "function") { // hier kann man nicht "this" benutzen, da diese Funktion nicht zu einem größeren Objekt gehört! FaderFramework.oldWinOnLoad(); // gespeicherte onload-Funktion ausführen } FaderFramework.onload(); // unsere onload-Funktion ausführen }; }, // onload-Funktion wird unmittelbar nach dem vollständigen Laden des Dokuments ausgeführt onload: function () { /* "this" verweist auf unser FaderFramework-Objekt! */ var i, fader, css, scripts = document.getElementsByTagName("script"); // baseURL herausfinden, um weitere Komponenten dieses Scripts nachladen zu können for (i = 0; i < scripts.length; i++) { if (scripts[i].src && scripts[i].src.match(/fader-framework\.js/)) { this.baseURL = scripts[i].src.replace(/(^|\/)fader-framework\.js$/, ""); } } // weitere Komponenten einbinden wenn baseURL ermittelt wurde if (this.baseURL) { // unsere CSS-Datei einbinden (also erzeugen) css = document.createElement("link"); css.rel = "stylesheet"; css.type = "text/css"; css.href = this.baseURL + "/fader-framework.css"; // -Element im hinten anfügen document.getElementsByTagName("head")[0].appendChild(css); } // vorgemerkte Fader erstellen fader = this.inits; delete this.inits; // wenn this.inits nicht existiert, dann erstellt this.init() echte Fader, anstatt sie nur vorzumerken for (i = 0; i < fader.length; i++) { this.init(fader[i]); } }, // Funktion zum Einrichten eines Faders (wird noch während des Ladens der Seite ausgeführt - eventuell mehrmals) init: function (einstellungen) { /* "einstellungen" ist ein Objekt, das folgende Struktur haben muss: { id: "id-des-HTML-Elements", // muss einmalig sein!! maxImageNumber: "die Nummer des letzten Bildes", // Bedingung: die Bilder müssen nummeriert vorliegen: 00000000.jpg, 00000001.jpg, ... // optionale Angaben viewTime: 20000, fadeStep: 1, random: true, autostart: false } */ var fader; if (this.inits) { this.inits[this.inits.length] = einstellungen; // für später abspeichern } else { fader = new this.Fader(einstellungen); // this.Fader ist eine Konstruktor-Funktion! // abspeichern wenn Fader erfolgreich erstellt wurde if (fader != false && !this.faders[einstellungen.id]) { this.faders[fader.id] = fader; if (fader.autostart) { // Fader autostarten window.setTimeout(function () { fader.start(); }, fader.viewTime); // start() wird dem Fader in der Konstruktor-Funktion verliehen, ebenso viewTime } } } }, // Konstruktor: Bauplan eines Faders 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() */ /* Funktionen (Methoden) des Faders definieren! ############################################ */ // Playlist generieren (enthält nur die Nummern der Bilder) this.createPlayList = function () { var i, r; this.playList = new Array(); if (this.random) { // zufällige Reihenfolge while (this.playList.length < this.images.length) { vorhanden = false; // Zufallszahl bereits vorhanden? r = Math.floor(Math.random() * (this.images.length)); for (i = 0; i < this.playList.length; i++) { if (r == this.playList[i]) { vorhanden = true; } } if (!vorhanden) { this.playList[this.playList.length] = r; } } } else { // geordnete Reihenfolge for (i = 0; i < this.images.length; i++) { this.playList[i] = i; } } }; // Funktion zum Starten des Faders this.start = function () { this.stopped = false; this.next(); }; // Funktion zum Stoppen des Faders this.stop = function () { this.stopped = true; // verhindert, dass weitere window.setTimeout-Funktionen gestartet werden }; // Funktion zum Anzeigen des nächsten Bildes this.next = function (single, dir) { // "single" ist true oder false und dient dazu, einen einmaligen Wechsel zu ermöglichen, ohne eine Slideshow zu starten. Wird kein Parameter übergeben, dann wird single nicht als true interpretiert. if (single) { this.stopped = true; } // Richtungsänderung übernehmen if (typeof dir == "string") { this.dir = dir; } // wurde der Fader angehalten? if ((this.stopped && !single) || this.fading) { return; // Ja -> keinen Bildwechsel durchführen! } // Counter weiterzählen (oder zurücksetzen) if (this.dir != "backwards") { this.counter = (this.counter < this.playList.length -1) ? this.counter +1 : 0; // Neue Playlist fällig? if (this.counter == 0) { // neue Playlist generieren this.createPlayList(); // neue Playlist erstellen } } else { this.counter = (this.counter > 0) ? this.counter -1 : this.playList.length -1; // Neue Playlist fällig? if (this.counter == this.playList.length -1) { // neue Playlist generieren this.createPlayList(); // neue Playlist erstellen } } // neues Bild zum Überblenden ins Element einhängen this.element.appendChild(this.images[this.playList[this.counter]]); this.images[this.playList[this.counter]].className = "next"; // Fading beginnt JETZT --> Text entfernen document.getElementById("text_area_1").innerHTML = ""; document.getElementById("text_area_2").innerHTML = ""; document.getElementById("text_area_3").innerHTML = ""; // Fading einleiten this.fade(); }; // Fade-Funktion für den Bilderwechsel (jeder Aufruf entspricht einem Fading-Schritt) this.fade = function (step) { var fader = this, imgs = this.element.getElementsByTagName("img"); // Bilderwechsel sperren, um Störungen während des Überblendens verhindern this.fading = true; // Wenn kein Wert übertragen wurde, dann muss das Fading von vorne durchgeführt werden step = step || 0; // neues Bild überblenden imgs[1].style.opacity = step/100; imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE? step += this.fadeStep; if (step <= 100) { window.setTimeout(function () { fader.fade(step); }, 1); } else { // Bilderwechsel wieder freischalten this.fading = false; // neues Bild ent-positionieren imgs[1].className = ""; // altes Bild entfernen this.element.removeChild(imgs[0]); // Text tauschen: WICHTIG: Bild0 wurde entfernt -> das neue Bild, das bisher Bild1 war ist jetzt Bild0! document.getElementById("text_area_1").innerHTML = getTextForPicture(imgs[0].src, 1); document.getElementById("text_area_2").innerHTML = getTextForPicture(imgs[0].src, 2); document.getElementById("text_area_3").innerHTML = getTextForPicture(imgs[0].src, 3); // Bildübergang abgeschlossen -> nach der Pause nächstes Bild window.setTimeout(function () { fader.next(); }, this.viewTime); } }; /* Init Fader ############################################ */ // 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.maxImageNumber < 2 ) { // also gibt es keinen Fader für diesen init-Aufruf return new Boolean(false); } // Einstellungen des Faders vornehmen - wie "einstellungen" aussehen muss, siehe Funktion "init"! this.id = einstellungen.id; this.images = new Array(); // Bilder werden hier nicht als Zeichenketten, sondern später als HTML-Elementobjekte abgelegt... this.random = (typeof einstellungen.random != "undefined") ? einstellungen.random : FaderFramework.random; this.autostart = (typeof einstellungen.autostart != "undefined") ? einstellungen.autostart : FaderFramework.autostart; this.viewTime = einstellungen.viewTime || FaderFramework.viewTime; this.fadeStep = einstellungen.fadeStep || FaderFramework.fadeStep; this.stopped = false; // hiermit kann später der Fader angehalten werden this.playList = new Array(); // Wiedergabeliste this.counter = 0; // aktuell angezeigtes Bild (Zähler für Playlist) this.dir = ""; // Richtung - "backwards" führt zu umgekehrter Reihenfolge this.fading = false; // blockt die Funktion next, um Störungen beim Überblenden zu verhindern // -Element als Container erzeugen und mit der Fader-Klasse ausrüsten this.element = document.createElement("span"); this.element.className = FaderFramework.className; // Opera korrigieren if (window.opera) { this.element.style.display = "inline-table"; } // das ursprüngliche Bild ersetzen var i; i = document.getElementById(this.id); // ursprüngliches Bild i.parentNode.replaceChild(this.element, i); // Bilder aus der Liste zu echten Bildobjekten machen und ins -Element einhängen for (i = 0; i < einstellungen.maxImageNumber; i++) { this.images[i] = document.createElement("img"); var szNumber = "" + i; var szSrc = "bilder/" + szNumber.lpad("0",8) + ".jpg"; this.images[i].src = szSrc; this.images[i].alt = "Bild " + szNumber; } // (eventuell zufällige) Playlist erzeugen this.createPlayList(); // nur erstes Bild ins Dokument Einhängen: // das 0. Element aus der (eventuell zufälligen) Playlist this.element.appendChild(this.images[this.playList[0]]); // Text anzeigen: WICHTIG: Bild0 wurde entfernt -> das neue Bild, das bisher Bild1 war ist jetzt Bild0! document.getElementById("text_area_1").innerHTML = getTextForPicture(this.images[this.playList[0]].src, 1); document.getElementById("text_area_2").innerHTML = getTextForPicture(this.images[this.playList[0]].src, 2); document.getElementById("text_area_3").innerHTML = getTextForPicture(this.images[this.playList[0]].src, 3); // fertigen Fader zurückgeben } } FaderFramework.start();