Ein Foto sanft in ein anderes überzublenden, ist ein schöner und dezenter Effekt. Mit ein paar HTML-, CSS- und Javascript-Grundlagen ist das schnell erledigt. Nur, wie es technisch funktioniert, ist auf Anhieb schwer vorzustellen, insbesondere für Designer mit wenig Programmiererfahrung. Dabei ist alles eigentlich ganz einfach. So soll es aussehen
Das sieht schon gut aus. Aber was läuft da genau ab? Ich habe eine zweite Seite gemacht, auf der das sicher etwas deutlicher wird. Zum besseren Verständnis habe ich die Bilder etwas versetzt angeordnet und ihnen jeweils eine besondere Rahmenfarbe gegeben. Das Bild mit dem roten Rahmen ist dasjenige, das gerade eingeblendet wird. Das Bild im gelben Rahmen ist das zuletzt sichtbare Bild, das Bild mit dem grünen Rahmen liegt ganz unten und spielt für den aktuell ablaufenden Vorgang keine Rolle.
So gehts
Wir haben drei Bilder, die wir nacheinander überblenden möchten. Sie befinden sich in einem DIV namens “bilderstapel”.
<div id="bilderstapel">
<img id="bild2" src="http://example.com/42.jpg" alt="" class="obersteebene" />
<img id="bild1" src="http://example.com/42-2.jpg" alt="" />
<img id="bild3" src="http://example.com/42-3.jpg" alt="" />
</div>
Technisch funktioniert das so: Die Bilder werden per CSS zunächst übereinander gelegt. Es gibt drei verschiedene Ebenen, die per z-index definiert sind. Das Bild, zu dem übergeblendet werden soll, hat die CSS-Klasse “obersteebene” (roter Rahmen). In ihr ist definiert, dass das Bild auf der obersten Ebene liegt (z-index: 3) und komplett transparent ist, die Deckkraft (CSS-Attribut “opacity”) ist also 0%. Ein darunter liegendes Bild hat die Deckkraft 100% (scheint durch) und ist für den Betrachter jetzt zu sehen (gelber Rahmen). Es hat den z-index 2. Das dritte Bild ist das Bild, das als letztes übergeblendet wird. Es hat den z-index 1 und einen grünen Rahmen.
Zunächst wird das Bild mit der CSS-Klasse “obersteebene” ausgewählt und in der Variable $alt gespeichert. Direkt danach wird das Bild ausgewählt, zu dem übergeblendet werden soll – entweder das nächste benachbarte Bild, oder, falls keines mehr existiert, das erste Bild des DIVs “bilderstapel”. Dieses Bild ist in $neu zu finden. Das Bild $alt wird dann auf die mittlere Ebene gesetzt. Das Bild $neu, zu dem wir überblenden möchten, bekommt die Deckkraft 0% zugewiesen und wird auf die oberste Ebene geschickt. Es ist jetzt komplett transparent, das Bild darunter scheint durch. Jetzt beginnt die Überblendung mit der Methode animate() von jQuery. Die Deckkraft wird langsam von 0% auf 100% erhöht.
function daumenKino() {
var $alt = $('#bilderstapel IMG.obersteebene');
if($alt.next().length)
var $neu = $alt.next();
else
var $neu = $('#bilderstapel IMG:first');
$alt.addClass('mittlereebene');
$alt.removeClass('obersteebene');
$neu.css({opacity: 0.0});
$neu.addClass('obersteebene');
$neu.animate({opacity: 1.0}, 2000, function() {
$alt.removeClass('mittlereebene');
});
}
Danach ist die Überblendung abgeschlossen. Das oberste Bild hat nun 100% Deckkraft und überlagert alle anderen Bilder. Wenn nun das nächste Bild eingeblendet werden soll, kann der ganze Vorgang einfach ohne veränderte Parameter neu gestartet werden. Die Funktion daumenKino() wird über setInterval() periodisch angestoßen:
$(document).ready(function() {
setInterval( "daumenKino()", 2000 );
});
Mehr über animate() finden Sie in der englischen Dokumentation von jQuery. Wenn Sie den Effekt selbst einsetzen möchten: In der Beispieldatei finden Sie alles, was Sie dazu benötigen. Viel Spaß und viel Erfolg! (tm)
Eine feine Sache, ganz ohne Ruckeln und IE-tauglich.
Danke für die sehr gute Anleitung!
Sehr schön, auch von mir ein herzliches Dankeschön, sowas habe ich schon länger gesucht.
ciao
Vielen Dank für das Daumenkino. Da ich viele Fotos auf meiner Website verwende, kommt es sicher bald zum Einsatz.
ähnlich gut lässt sich das übrigens auch mit der YUI oder script.aculo.us (oder vermutlich jeder anderen JS library) realisieren. prima grundlagenwissen jedenfalls, danke herr schmidt.
Vielen Dank für die Anleitung – Ein echter Mehrwert!
Gibt es solche Funktionen eigentlich auch schon in den großen CMS Systemen fertig eingebaut ?
[...] Dr. Web gibts heute auch einen Anleitung wie man ein Daumenkino mit jQuery realisiert. Die Idee ist an sich nicht schlecht, als JavaScript-Programmierer finde ich [...]
[...] Fast hätte ich es vergessen: Der Drweb-Artikel “Daumenkino mit jQuery” erklärt, wie mit ein paar Zeilen HTML, CSS und Javascript bzw. jQuery ein kleines “Daumenkino” eingerichtet wird, bei dem die Bilder sanft ineinander übergeblendet werden. Der Artikel ist an Designer gerichtet, die nicht jeden Tag und ständig ihre Programmierfähigkeiten schärfen können :) Jetzt kostenlos lesen! [...]
Ah na Lob liest man immer gerne :) Gruß an alle!
Schick Schick, für alle Intressierte gibt es da auch noch dhonishow, ist sehr Flexible was die Anpassung belangt und doch einfach zu handhaben, basiert auf prototype.
[...] seinem Artikel bei drweb zeigt Rene Schmidt, wie man zwei Bilder mit Hilfe von jQuery langsam überblenden lassen kann. [...]
Hallo,
vielen Dank für das super Script. Leider hab ich damit noch ein Problem mit dem IE6, da werden meine 3 Titelbilder einfach untereinander dargestellt.
Kann mir jemand sagen, was ich vergessen/falsch gemacht hab? Das Script läuft im Firefox einwandfrei, so wie es sein soll…
Danke für eventuelle Tipps ;-)
@Björn: img stehen vielleicht nicht auf “position: absolute”? Platzieren muss man die Bilder dann z.B. mit einem übergeordneten DIV.
@Thomas Weise: Ob beim Überblenden etwas ruckelt, aufblitzt oder auch nicht hängt ganz maßgeblich vom Browser bzw. vom Rechner ab, auf dem der Browser läuft. Je weniger Ressourcen vorhanden sind desto eher ruckelt etwas.
das ruckelen kann man etwas reduzieren, indem man die überblendgeschwindigkeit anhebt – so zumindest meine erfahrung mit ähnlichen jquery anwendungen.
Hallo – danke für das nette Skript, genau so etwas habe ich gerade gesucht!
Ich musste allerdings feststellen dass das Beispiel auf dieser Seite mit Opera 9.27/Mac nur umschaltet und nicht umblendet (PC-Opera hab ich noch nicht getestet). FF2(Mac) und Safari3(Mac), sowie IE6(PC) laufen gut.
Gibt’s zu Opera vielleicht noch irgendwelche Ideen?
Weiss jemand wie man den Intervall steuern kann, so daß das erste Bild 2 Sek. dauert bis es startet und dann alle 4 sek. eine Überblendung statt findet? Wen ich den Intervall mit 2000 starte und animate auf 4000 setze gibt es voll den Hickhack. Hat wer Rat?
Tolle und einfache Anleitung. Danke.
Leider bekomme ich es mit mehr Bilder einfach nicht richtig hin.
Was muß ich dabei beachten?
Gruß Hobby-Prog
Hallo,
sehr gut dass dies so schön überblendet wird.
1) Nur wie löse ich das, dass ich zusätzlich zu jedem Bild einen Link setze, einfach gesagt, jedem Bild einen Link zuordnen wo man bei Klick auf diesen geleitet wird.
2) Wie kann ich zusätzlich einen eine Direktwahl einbauen zB 1 2 3 4 5 wo ich ein Bild mit Klick direkt ansteuern kann (falls man zB das vorherige nochmal sehen will)