project fader framework

[Thomas]

hi, ich habe mir auf Basis des Projektes fader framework das gazne zusammengebastelt. Nun will ich aber noch etwas schrift darüber haben, ich weis aber nicht wie ich das anstelle, bzw. wo ich das einbinden müsste..

das framework wird aktuell in einem div aufgerufen
im div mainPicture ist eigentlich noch text, der geht ja nun aber so nicht, weil das framwork alles ersetzt:-(

<div id="mainPicture">
     <div class="picture" id="fader1">

kennt sich wer damit aus?

Vielen Dank
Thomas

[EKKi]

Mahlzeit Thomas,

kennt sich wer damit aus?

Vielleicht der Autor?

BTW: was hat das mit Java zu tun?

MfG,
EKKi

[thomas]

es ist ein java project..

und ich dachte, vielleicht haben es schon meherere hier einmal umgesetzt.

[Cheatah]

Hi,

es ist ein java project..

wäre das Problem ein anderes, wenn es sich z.B. um ein Python- oder ein ASP.Net-Projekt handeln würde?

Cheatah

[EKKi]

Mahlzeit thomas,

es ist ein java project..

Nein.

MfG,
EKKi

[Felix Riesterer]

Lieber Thomas,

Nun will ich aber noch etwas schrift darüber haben

definiere "etwas Schrift"! Vergiss nicht zu erwähnen, welchen Sinn diese "Schrift" haben soll...

Liebe Grüße,

Felix Riesterer.

[Thomas]

Der Felix hat geantwortet, hab ich gar nicht gesehen.

Also etwas schrift ist konkret ein Zweizeiler (sind bei mir momentan einzelne Divs mit verschiedenen classes.)

Der Text is die ganze Zeit der Selbe.
er liegt in dem div, das die Id fader1 hat, wird also beim ersten faden gekickt.

is das so genau genug definiert?

mfg und danke

Thomas

[Thomas]

Ich hab den Sinn vergessen:
Also die Bilder sind der Main Hintergrund meiner Site und die Schrift is sozusagen das "Firmenlogo".
Da ich es dynamisch halten will, soll es schrift bleiben (also nich im Bild integriert sein).

[Don P]

Hallo,

Der Text is die ganze Zeit der Selbe.
er liegt in dem div, das die Id fader1 hat, wird also beim ersten faden gekickt.

Eine Id für Fader sollte natürlich zu einem reinen Bild-Element gehören, z.B. <img>, nicht zu etwas größerem mit noch anderen Elementen drin oder mit Text.

Das Framework entsprechend umzubauen dürfte nicht ganz trivial sein.

Ist vielleicht besser, du baust deine Seite etwas um: Ein img-Element mit dem Bild für den Fader einbauen, und danach das div mit dem Text per CSS position:absolute genau darüberlegen.

Gruß, Don P

[Thomas]

ja, an sowas dachte ich jetzt auch, dazu muss ich halt bisschen anpassen, aber ich denke, dass es so sinnvoller ist.

Zum Thema Div Suppe: Ich verdiene ja auch nich mein geld damit :-)

aber danke, ich werde es optimieren.

[Don P]

Hallo,

Zum Thema Div Suppe: Ich verdiene ja auch nich mein geld damit :-)

Soso... ich schenke dir mal folgende Optimierung (oder gibst du mir was dafür?):

  
/***********************************************************************/  
var FaderFramework = {  
  
    geladen: false,  
    vorgemerkt: [],   /* synonym zu 'new Array()' */  
  
    init: function (einstellungen) {                             // this ist das FaderFramework-Objekt:  
  
        if (!this.geladen) {                                     // Dokument noch unvollständig:  
  
            this.vorgemerkt.push(einstellungen);                 // Einstellungen vormerken  
  
        } else {                                                 // Dokument vollständig:  
  
            var spanElement = this.createFader(einstellungen);   // span mit Fader erstellen  
  
            if (spanElement) {                                   // wenn ok, warten & starten:  
  
                window.setTimeout(function () { spanElement.fader.run(); }, spanElement.fader.viewTime);  
            }  
        }  
    },  
  
    start: function () {  
  
        var oldWinOnLoad = window.onload;                        // alten onload-Handler merken  
  
        window.onload = function () {                            // neuen onload-Handler setzen  
  
            if (oldWinOnLoad) { oldWinOnLoad(); }                // ggf. alten Handler zuerst rufen,  
            FaderFramework.onload();                             // dann unseren Handler  
        };  
    },  
  
    onload: function () { // onload-Handler (this ist das FaderFramework-Objekt):  
  
        var e = document.createElement("link");  
        e.type = "text/css";  
        e.rel = "stylesheet";  
        e.href = "fader-framework/fader-framework.css";  
        document.getElementsByTagName("head")[0].appendChild(e); // CSS-Stylesheet einbinden  
  
        this.geladen = true;                                     // Fader-Framework ist jetzt bereit  
  
        while (this.vorgemerkt.length) {                         // mit allen vorgemerkten Fadern:  
  
            this.init(this.vorgemerkt.shift());                  // erstellen und laufen lassen  
        }  
        delete this.vorgemerkt;                                  // vorgemerkte Fader löschen  
    },  
  
    createFader: function(einstellungen) {  
  
        var id = einstellungen.id, original = id && document.getElementById(id);  
        if (!original || original.fader || einstellungen.bilder.length < 2) { return null; }  
  
        var Fader = function (span, einstellungen) { // Konstruktor für Fader (this ist das span-Element)  
  
            this.viewTime   = einstellungen.viewTime || 2000;      // Standard 2s  
            this.speed      = einstellungen.speed || 1;            // Überblend-Tempo  
            this.bilder     = einstellungen.bilder;                // Bildquellen  
            this.bilder.rot = function(){this.push(this.shift())}; // Rotiermethode (this ist das Array)  
            this.bildElmt   = span.firstChild;                     // Vordergrund  
            this.span       = span;                                // Hintergrund  
  
            this.run = function (step) { // run-Methode für schrittweises Überblenden:  
  
                var fader = this;                                                   // für Closures  
  
                step = step || 0;                                                   // Deckkraft, Standard 0  
                this.bildElmt.deckkraft(step);                                      // Deckkraft neu setzen  
  
                step += this.speed;                                                 // nächste Deckkraft  
  
                if (step <= 100) {                                                  // noch keine volle Deckkraft:  
  
                    window.setTimeout(function () { fader.run(step); }, 1);         // weiter überblenden  
  
                } else {                                                            // volle Deckkraft erreicht:  
  
                    this.bilder.rot();                                              // Bild-Array rotieren  
                    this.span.style.backgroundImage = "url(" + this.bilder[0] +")"; // neuer Hintergrund  
                    this.bildElmt.deckkraft(0);                                     // Vordergrund durchsichtig  
                    this.bildElmt.src = this.bilder[1];                             // neuer Vordergrund  
                                                                                    // warten & überblenden:  
                    window.setTimeout(function(){ fader.run(); }, fader.viewTime);  
                }  
            };  
        };  
  
        var span = document.createElement("span");                           // span-Element als Container  
        span.style.backgroundImage = "url(" + einstellungen.bilder[0]  +")"; // mit Hintergrundbild  
  
        var bildElement = document.createElement("img");           // neues Bildelement für Vordergrund  
        bildElement.src = einstellungen.bilder[1];                 // Bildquelle für Vordergrund setzen  
        bildElement.alt = "Bild";                                  // Alternaiv-Text setzen  
  
        bildElement.deckkraft = function(wert) { // Deckkraft-Methode zuweisen (this ist das bildElement)  
            this.style.opacity = wert/100;  
            this.style.filter = "Alpha(opacity=" + wert + ", finishopacity=" + wert + ", style=2)"; // IE  
        };  
  
        bildElement.deckkraft(0);                                  // Vordergrund durchsichtig machen  
        span.appendChild(bildElement);                             // und in Hintergrund-Container stecken  
  
        span.id = original.id;                                     // id des Originalbildes beibehalten  
        span.className = "fader";                                  // CSS Klasse für Positionierung zuweisen  
        span.fader = new Fader(span, einstellungen);               // fader-Eigenschaft für Container setzen  
  
        original.parentNode.replaceChild(span, original);          // Originalbild durch Container ersetzen  
        return span;                                               // und diesen zurückgeben  
    }  
};  
  
FaderFramework.start();  
/***********************************************************************/  

Hier wird nicht für *jedes* Bild ein eigenes img-Element erzeugt und diese im DOM ein- und umgehängt, sondern es reicht ein einziges img-Element pro Fader zum Überblenden, eingebettet in ein span-Element, das eine Hintergrundgrafik hat. Das Original-Bild wird einmalig durch dieses span-Element ersetzt.

Zum Faden ändert das img-Element mit Hilfe einer eigenen Methode seine Deckkraft, und zum enlosen Bildwechseln ändert der Fader nur die src-Attribute des img-Elements und der Hintergundgrafik.

So klappt's übrigens auch mit dem IE. :-)

Im CSS braucht man nur:
/***********************************************************************/

  
.fader {  
    position: relative;  
    display: inline-block;  
}  
  
.fader img {  
    vertical-align: top;  
}  
/***********************************************************************/  

Auf eine CSS-Klasse "next" und eine Methode "next" im Fader wurde verzichtet.

Es fehlen hier die Random-Sache und die automatische Pfad-Anpassung, die im original-Fader-Framework gegen Ende der noch eingbaut sind.

Möglicherweise ist der Verzicht auf die vielen img-Elemente auch ein Nachteil, Stichwort preload von Bildern. Bei einem langsamen Netz könnte es vielleicht zu Problemen kommen, falls eine überblendende Grafik noch nicht (ganz) geladen ist...

In diesem Fall müsste man doch zuerst alle laden, was aber nicht schwer mit obigem Code zu implementieren ist.

Gruß, Optimierer alias Don P ;-)

[Thomas]

Danke!

ich werde heute nacht mal fleissig sein :-)

ich date dann mal morgen up

[Harlequin]

Yerf!

ich date dann mal morgen up

Wer ist "up" und verrätst du uns dann, wie das Date gelaufen ist?

*scnr* (nicht böse sein, aber irgendwie klingt das einfach komisch...)

Gruß,

Harlequin

[Felix Riesterer]

Lieber Thomas,

Also etwas schrift ist konkret ein Zweizeiler (sind bei mir momentan einzelne Divs mit verschiedenen classes.)

ich bin mir sicher, dass die Verwendung von <h1>/<h2> wesentlich sinnvoller ist, als <div>. Eventuell möchtest Du sogar eine Kombination aus <hx> und <p>...?

Der Text is die ganze Zeit der Selbe.

Dann sollte er außerhalb des Faders liegen. Mit CSS lässt sich dann die Anordnung der Elemente sicherlich zufriedenstellend lösen. Auch eine zeitgesteuerte Einblendung lässt sich umsetzen. Dazu kannst Du ja Elemente des Fader-Frameworks benutzen (die Einblendfunktionalität mittels opacity lässt sich auch auf andere HTML-Elemente anwenden), oder zumindest Teile nachprogrammieren.

er liegt in dem div, das die Id fader1 hat, wird also beim ersten faden gekickt.

Das halte ich für einen problematischen Ansatz.

is das so genau genug definiert?

Schon, und meine Befürchtungen (DIV-Suppe) wurden bestätigt. Ist das eine hilfreiche Antwort?

Liebe Grüße,

Felix Riesterer.