Projekt: FaderFramework

SELFHTML aktuell Artikel JavaScript Fader-Framework
	Projekt: FaderFramework
	Projekt: FaderFramework Vorbereitungen Erstes Projektergebnis Transportables Script Projekt fertig - eigentlich

Projekt: FaderFramework

Spätestens jetzt ist es an der Zeit, Code in externe Dateien auszulagern. Im vorherigen Beispiel wurde bereits CSS-Code ausgelagert, der JavaScript-Code für das Framework jedoch noch nicht. Das soll nun geschehen. Um das Projekt auch noch "transportabel" zu machen, empfiehlt es sich, gleich ein eigenes Verzeichnis dafür anzulegen.

Vorbereitungen

Ordnerstruktur. Dieses Verzeichnis sollte folgende Struktur haben (siehe nebenstehende Grafik), damit die kommenden Beispiele aus diesem Artikel nachvollziehbar sind:

Für unser JavaScript-Projekt legen wir einen Unterordner fader-framework an, in welchem wir zwei neue Text-Dateien anlegen: fader-framework.js und fader-framework.css.

Weiterhin benötigen wir im Arbeitsordner selbst unser HTML-Dokument zum Anzeigen (index.html) und einen Unterordner für Bilder (images).

Wer mit den Bildern des Autors arbeiten möchte, kann diese von hier beziehen: fader-images.zip (738 KB).

Um eine Testumgebung zu schaffen, brauchen wir ein HTML-Dokument, welches - wie in den vorangegangenen Beispielen auch - zwei Fader verlangt, damit wir testen können, ob unser Script dieser Aufgabe gewachsen ist. Der prinzipielle Aufbau des folgenden Code-Beispiels sollte nicht mehr unbekannt sein.

`index.html`:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Fader-Test</title>

        <script type="text/javascript" src="fader-framework/fader-framework.js"></script>
        <script type="text/javascript">
            FaderFramework.init({
                id: "fader1",
                images: [
                    "images/fliegen1.jpg",
                    "images/fliegen2.jpg",
                    "images/fliegen3.jpg",
                    "images/fliegen4.jpg",
                    "images/fliegen5.jpg",
                    "images/fliegen6.jpg"
                ]
            });
        </script>
    </head>
    <body>

        <h1>Fader-Framework-Test</h1>
        <p>Erster Fader: <img src="images/cool.gif" alt="Smiley" id="fader1">.</p>
        <p>Zweiter Fader: <img src="images/sonne4.jpg" alt="Sonne" id="fader2">.</p>
        <p><a href="#" onclick="FaderFramework.init({
            id:'fader2',
            images:['images/berge1.jpg','images/berge2.jpg','images/berge3.jpg',
                'images/berge4.jpg','images/berge5.jpg','images/berge6.jpg']
            });return false;"
        >Zweiten Fader erzeugen und starten</a></p>
    </body>
</html>

Erläuterung:

Im <head> der Datei werden zwei <script>-Bereiche definiert. Der erste lädt eine externe Scriptdatei (das FaderFramework-Script) aus dem fader-framework-Verzeichnis nach. Der zweite führt einen Funktionsaufruf aus. Dabei wird im zweiten <script>-Bereich auf eine Funktion (FaderFramework.init) zurückgegriffen, die im ersten <script>-Bereich über die externe JavaScript-Datei zuvor definiert wurde. Eine umgekehrte Reihenfolge dieser zwei <script>-Bereiche würde daher unvermeidlich zu einer Fehlermeldung in der JavaScript-Konsole des jeweiligen Browsers führen!

Bei diesem Funktionsaufruf wird ein Objekt übermittelt, das zwischen zwei geschweiften Klammern als Objekt-Literal notiert wird. Dieses Objekt und seine Eigenschaften werden später von dem betreffenden Fader als dessen Einstellungen verarbeitet werden.

Über den Link "Zweiten Fader erzeugen und starten" kann vom Besucher der Seite ein weiterer Fader eingerichtet werden, der auch sofort startet. Im onclick-Attribut des Links ist dafür ein weiterer Funktionsaufruf enthalten, der wiederum die Funktion FaderFramework.init mit passenden Parametern aufruft, um diesen zweiten Fader einzurichten.

`fader-framework.css`:

.fader {
    position: relative;
    display: inline-block;
}

.fader img {
    vertical-align: top;
}

.fader img.next {
    position: absolute;
    top: 0;
    left: 0;
}

Erläuterung:

Dieser Code wurde im Prinzip bereits in einem früheren Beispiel benötigt. Diese CSS-Regeln erreichen, dass die Bilder einer Slideshow alle passgenau übereinander positioniert werden.

`fader-framework.js`:

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();

Erläuterung:

Das ist der JavaScript-Code unseres FaderFrameworks in seiner gegenwärtigen Form. Dieser Code kommt in die JavaScript-Datei fader-framework.js.

Erstes Projektergebnis

Wenn alle Dateien an Ort und Stelle abgelegt sind, dann sollte das in etwa so aussehen:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Transportables Script

Das FaderFramework hat bisher noch den kleinen Schönheitsfehler, dass es die CSS-Datei fest referenziert. Das wird zu einem Problem, wenn das Framework von überall auf der Website einbindbar sein soll. Denn dann stimmt der Pfad zur CSS-Datei eventuell nicht mehr. Dieser kleine Schönheitsfehler lässt sich korrigieren, indem das Script seine eigene URL ermittelt. Davon ausgehend bestimmt es das Verzeichnis, in dem es sich befindet. Diese Information wird dann sinnvollerweise als Eigenschaft baseURL abgespeichert. Dazu muss lediglich die onload-Methode des Framework-Scripts angepasst werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

onload: function () {
    var i, fader, e, scripts = document.getElementsByTagName("script");

    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$/, "");
        }
    }

    if (this.baseURL) {
        e = document.createElement("link");
        e.type = "text/css";
        e.rel = "stylesheet";
        e.href = this.baseURL + "/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]);
    }
},

Erläuterung:

In der Variablen scripts wird eine Liste aller verfügbaren <script>-Elemente abgelegt. Diese wird in der for-Schleife daraufhin untersucht, ob es ein <script>-Element gibt, das ein src-Attribut enthält, und wenn ja, ob dessen Inhalt am Ende fader-framework.js lautet. Anschließend wird dieser Wert um /fader-framework.js verkürzt als Pfad zum Verzeichnis des Scripts in der Framework-Eigenschaft baseURL gespeichert.

Schließlich prüft das Script, ob eine Pfadangabe erfolgreich ermittelt werden konnte, um in diesem Falle dann die CSS-Datei mit dem passenden Pfad (jetzt basierend auf baseURL) einzubinden.

Beachten Sie:

Die String-Methoden match und replace benutzen als Suchmuster Reguläre Ausdrücke, auf die hier nicht näher eingegangen werden kann, da dieses Thema diesen Artikel bei weitem sprengen würde. Der interessierte Leser mag sich über die angegebenen Links weiter informieren - für diesen Artikel mag es genügen, dass der Pfad zum Script gefunden, und dass das Verzeichnis daraus extrahiert wird.

Projekt fertig - eigentlich

Mit dieser Modifikation ist das Script wirklich vielseitig geworden, da es von einer beliebigen externen Quelle aus eingebunden werden kann, und ab da alles automatisch einrichtet: Autostart, nachzuladende Komponenten (CSS-Datei) und Fader einrichten. Dabei ist es sogar möglich, nach dem endgültigen Laden der Seite mit anderen Script-Aufrufen zusätzliche Fader einzurichten, ohne auf den Automatismus angewiesen zu sein, der nach dem Laden der Seite diese Vorgänge sofort selbständig vornehmen kann.

Damit wäre dieser Artikel eigentlich am Ende angelangt... wäre da nicht noch der Wunsch nach eventuellen Extras.

Komfort-Fader (mit zufälliger Bilderreihenfolge)

Ein Framework zur Verwaltung der Fader-Objekte

Projekt: FaderFramework

Projekt: FaderFramework

Vorbereitungen

index.html:

Erläuterung:

fader-framework.css:

Erläuterung:

fader-framework.js:

Erläuterung:

Erstes Projektergebnis

Transportables Script

Beispiel:

Erläuterung:

Beachten Sie:

Projekt fertig - eigentlich

`index.html`:

`fader-framework.css`:

`fader-framework.js`: