project fader framework
Thomas
- java
0 EKKi- javascript
0 Felix Riesterer
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
Mahlzeit Thomas,
kennt sich wer damit aus?
Vielleicht der Autor?
BTW: was hat das mit Java zu tun?
MfG,
EKKi
es ist ein java project..
und ich dachte, vielleicht haben es schon meherere hier einmal umgesetzt.
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
Mahlzeit thomas,
es ist ein java project..
MfG,
EKKi
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.
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
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).
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
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.
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 ;-)
Danke!
ich werde heute nacht mal fleissig sein :-)
ich date dann mal morgen up
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
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.