/* Fader-Framework zum Einrichten von Bilderwechseln */ 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 userstop: false, nextimg: "", toggleTimeOut: "", // 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!! images: ["pfad/bild1.jpg", "pfad/bild2.jpg"], // weitere Bilder möglich // 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() */ // 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.images.length < 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.links = new Array(); 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.images.length; i++) { img = document.createElement("img") ; img.src = einstellungen.images[i] ; if(einstellungen.imagelinks) { link = document.createElement("a") ; link.href = einstellungen.imagelinks[i] ; link.appendChild(img) ; this.images[i] = link ; } else { this.images[i] = document.createElement("img"); this.images[i].src = einstellungen.images[i]; } if(einstellungen.imagetitles){ this.images[i].alt = einstellungen.imagetitles[i]; } else { this.images[i].alt = '' ; title = document.getElementById('imgtitle'); title.style.display = 'none' ; } // nur erstes Bild ins Dokument Einhängen if (i == 0) { this.element.appendChild(this.images[i]); } } title = document.getElementById('imgtitle'); titlelink = document.createElement('a') ; titlelink.href = einstellungen.imagelinks[0] ; titlelink.innerHTML = this.images[0].alt ; title.appendChild(titlelink) ; /* 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 for (i = 0; i < einstellungen.images.length; i++) { img = document.createElement("img"); img.src = einstellungen.images[i]; img.alt = (einstellungen.imagetitles) ? einstellungen.imagetitles[i] : ''; link = document.createElement("a") ; link.href = einstellungen.imagelinks[i] ; link.appendChild(img) ; this.images[i] = link ; } this.setActivePicWhileFading() ; this.element.appendChild(this.images[this.playList[this.counter]]); nextImg = this.images[this.playList[this.counter]].firstChild ; nextImg.className = "next"; // Fading einleiten this.fade(); }; //Funktion zur manuellen Auswahl eines Bildes this.step = function (nr,obj) { this.counter = nr ; this.setActivePic(obj) ; //wenn Fader läuft if(this.fading){ this.userstop = true; //stoppt fader this.nextimg = nr; //anzuzeigendes Bild festlegen } //Fader läuft nicht else { links = this.element.getElementsByTagName("a"); imgs = links[0].firstChild ; links[0].removeChild(imgs) ; newImg = document.createElement("img") ; newImg.src = einstellungen.images[nr]; newImg.alt = imgs.alt ; newImg.className = "" ; links[0].appendChild(newImg) ; /*imgs.src = einstellungen.images[nr];*/ title = document.getElementById('imgtitle'); titlelink = title.firstChild ; titlelink.href = einstellungen.imagelinks[nr] ; titlelink.innerHTML = einstellungen.imagetitles[nr]; links[0].href = einstellungen.imagelinks[nr] ; //button auf play wechseln elm = document.getElementById('pause'); elm.src = 'fileadmin/templates/pics/start2.gif' ; elm.alt = 'start' ; window.clearTimeout(this.toggleTimeOut); } } this.setActivePic = function (obj) { this.unsetActivePic() ; //setzen der active-class if(obj.className == 'numbers_first') { obj.className = 'numbers_first_active' ; } else { obj.className = 'numbers_active' ; } } this.setActivePicWhileFading = function () { this.unsetActivePic() ; allElements = document.getElementById('slideshow-nav').childNodes ; counter = this.counter ; counter++; for(var i=0; i nach der Pause nächstes Bild this.toggleTimeOut = window.setTimeout(function(){fader.next()}, 3000); } }; // Fader initialisieren this.createPlayList(); // fertigen Fader zurückgeben } } FaderFramework.start();