Liebes Forum,
da gerade zwei Threads zum Thema "Bild überblenden" laufen (Thread1, Thread2), und sich zwei Interessenten gefunden haben, die mehr zum Schreiben eines JavaScripts lernen wollen, dachte ich mir, ich könnte das hier im Forum machen, sodass mehrere Leute die Chance haben, hier ihr Wissen auszutauschen und dazuzulernen.
Ich jedenfalls habe durch meine Beschäftigung mit diesem Thema wieder eine Menge selbst dazugelernt.
Ziel dieses "Lehrgangs": Ein JavaScript, das aus einer externen Datei in ein Dokument eingebunden werden kann, sich dort selbst initialisiert, und das ein vorhandenes Bild in eine Art Bilder-Slideshow umwandeln kann. Dabei soll es genügend modular aufgebaut sein, damit man auch Teile daraus explizit aufrufen kann, um einmalig ein Bild in ein anderes überzublenden. Zuguterletzt sollen mehrere solche Slideshows auf einer Seite möglich sein.
Nennen wir der Einfachheit halber den Slideshow-Mechanismus, den das Script bereitstellen soll, "Fader".
Um unser Ziel zu erreichen, sollten ein paar Voraussetzungen geklärt werden:
1.) Wenn JavaScript nicht verfügbar sein sollte, dann darf im Dokument keine "Lücke" sein. Daher setzten wir ein Bild voraus, welches sinnvollerweise mit einer ID versehen sein muss, damit wir unseren Fader für dieses Bild mit den dafür benötigten (individuellen!) Einstellungen einrichten können.
2.) Das Script muss "unobtrusive" (zu deutsch etwa "dezent", oder "unaufdringlich") werden, sodass also im HTML-Dokument (zumindest im <body>) kein JavaScript-Code notiert wird. Das bedeutet, dass Der Aufruf zum Beispiel so geschehen könnte:
~~~javascript
FaderFramework.init({
id: "fader_test_1", // ID des vorhandenen <img />-Elements
images: ["images/pic1.jpg", "images/pic2.jpg"] // Array der Bilder, in die übergeblendet werden soll
});
Dieser Code könnte natürlich auch in einer externen JavaScript-Datei stehen, die natürlich nach dem eigentlichen Fader-Script eingebunden werden müsste, oder er könnte dynamisch aus irgendeinem anderen Script generiert werden, oder oder oder.
3\.) Das Script muss für jeden gewünschten Fader ein eigenes Objekt anlegen, das sowohl das Manipulieren des/der <img />-Elemente handhabt, als auch die Funktionen bereitstellt, die das manuelle Aufrufen für einmalige (eventuell auf Userklick hin ausgelöste?) Überblendungen ermöglichen.
4\.) Für die Überblendungen wird es notwendig sein, dass die Bilder sich alle überlagern, damit der Wechsel möglich wird. Dazu ist es sinnvoll, eine externe CSS-Datei mit den notwendigen Klassen zu definieren, in denen die Styles für diesen Zweck definiert werden. Der Hintergrund ist der, dass das dynamische Zuweisen von CSS-Eigenschaften in JavaScript in der Menge immer mühsamer wird, während das dynamische Zuweisen von Klassen deutlich einfacher (und auch schneller) geht.
Eine solche CSS-Datei müsste unser Script dann selbst in das HTML-Dokument nachladen, falls JavaScript nicht verfügbar sein sollte.
So, jetzt kann es losgehen.
Ich lege zum Arbeiten einen neuen Ordner ("Testordner") an. In diesem Ordner erstelle ich zwei Unterordner: "fader-framework" und "images".
In den Unterordner "images" speichere ich ein paar Bilder, die in einem Fader nacheinander angezeigt werden sollen. Die von mir verwendeten Bilder darf sich gerne jeder, der an diesem Lehrgang interessiert ist, bei mir herungerladen: [fader-images.zip](http://www.felix-riesterer.de/self/fader-images.zip) (469KB)
Im Unterordner "fader-framework" lege ich zwei neue Textdateien an: "fader-framework.js" und "fader-framework.css"
Nun schreibe ich ein kleines HTML-Dokument, welches ich in unserem Arbeitsordner speichere und welches das JavaScript dann aus dem Unterordner "fader-framework" einbinden wird. Ich greife hier schon etwas vor und notiere meine fertige Test-Datei, mit der ich hier im weiteren Verlauf mein Script testen werde.
(Datei "Testordner/index.html")
~~~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: "fader_test_1",
images: ["images/biggrin.gif","images/blink.gif","images/cool.gif","images/dry.gif","images/huh.gif","images/lol.gif","images/rolleyes.gif","images/tongue.gif"],
fadeStep: 1,
random: true
});
FaderFramework.init({
id: "fader_test_2",
images: ["images/sonne1.jpg", "images/sonne2.jpg", "images/sonne3.jpg", "images/sonne4.jpg"],
viewTime: 6000,
fadeStep: 0.25
});
</script>
</head>
<body>
<h1>Fader-Framework-Test</h1>
<p>Bei dieser Lösung muss ein Bild <img src="images/biggrin.gif" alt="" id="fader_test_1" /> mit ID als Platzhalter verwendet werden, damit es zu einem Fader umgebaut werden kann.</p>
<p><img src="images/sonne1.jpg" alt="" id="fader_test_2" /></p>
<p>Wie man sieht, gelingen mehrere Fader auf derselben Seite.</p>
</body>
</html>
So. Nun widme ich mich der CSS-Datei, die ich im Unterordner "fader-framework" angelegt habe.
Was muss in diese CSS-Datei hinein? Dazu ein paar kurze Überlegungen:
1.) Das ursprüngliche Bild wird ersetzt werden müssen, denn damit mein Script sinnvoll zu realisieren ist, sollte es ein eigenes Element (hier ein <span>-Element) benutzen, in welches es alle Bilder des Faders hineinschreibt. Dieses Element erhält von uns dann eine Klasse, in meinem Beispiel "fader".
2.) In unserem <span>-Element werden sich beliebig viele Bilder tummeln, die alle übereinandergestapelt positioniert sein müssen, damit ein Überblenden an Ort und Stelle geschehen kann, denn sonst werden diese Bilder nebeneinander, oder bei zu wenig Platz auch untereinander angeordnet. Deshalb müssen alle Bilder per CSS übereinander gelegt werden.
3.) Wenn in meinem <span>-Element ein zweites Bild über mein erstes Bild soll, dann muss ich es absolut positionieren, damit es aus dem Elementfluss genommen wird und keinen weiteren Platz beansprucht. Alle weiteren Bilder ebenso. Das erste Bild muss aber im Elementfluss bleiben, da sonst unser <span>-Element keine Ausmaße hätte (es wäre ja vom Elementfluss her betrachtet ansonsten leer). Daher verwenden wir eine Klasse namens "next", um zu zeigen, dass dieses spezielle Bild nicht das erste Bild im <span>-Element ist.
Eigentlich wäre das nicht notwendig, wenn alle Browser die Pseudo-Eigenschaft "http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=:first-child" zufriedenstellend interpretieren könnten, daher ist diese Klasse, die unser Script dann an die entsprechenden Bilder vergeben muss, ein Workaround.
4.) Absolut positionierte Elemente beziehen sich immer auf das <body>-Element, wenn keines ihrer Vorfahren irgendwie anders positioniert ist (z.B. durch float oder position:relative/absolute), sodass unser <span>-Element künstlich in seiner Positionierung verändert werden muss. Wir setzen es deshalb auf position:relative. Und wenn wir für die Eigenschaften "top", "right", bottom" und "left" keine Werte vergeben, dann bleibt unser relativ positioniertes <span>-Element genau da, wo es auch sonst, wäre - jedoch mit dem Vorteil, dass sich unsere absolut positionierten Bilder innerhalb desselben, genau an seiner obersten linken Ecke ausrichten und von daher passgenau über unser erstes Bild zu liegen kommen. - Denkweise klar geworden?
Nun also unser CSS-Code (Datei "Testordner/fader-framework/fader-framework.css"):
.fader {
position: relative;
}
.fader img {
vertical-align: top;
}
.fader img.next {
position: absolute;
top: 0;
left: 0;
}
Für den JavaScript-Teil findet mich die Forensoftware "etwas geschwätzig", sodass dieser im nächsten Posting stehen muss.
Diskussionen und Kommentare (insbesondere Verbesserungen) sind sehr willkommen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)