Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Rene Schmidt 6. März 2009

Daumenkino mit jQuery

Ein Foto sanft in ein ande­res über­zu­blen­den, ist ein schö­ner und dezen­ter Effekt. Mit ein paar HTML-, CSS- und Javascript-Grundlagen ist das schnell erle­digt. Nur, wie es tech­nisch funk­tio­niert, ist auf Anhieb schwer vor­zu­stel­len, ins­be­son­de­re für Designer mit wenig Programmiererfahrung. Dabei ist alles eigent­lich ganz ein­fach. So soll es aus­se­hen

Das sieht schon gut aus. Aber was läuft da genau ab? Ich habe eine zwei­te Seite gemacht, auf der das sicher etwas deut­li­cher wird. Zum bes­se­ren Verständnis habe ich die Bilder etwas ver­setzt ange­ord­net und ihnen jeweils eine beson­de­re Rahmenfarbe gege­ben. Das Bild mit dem roten Rahmen ist das­je­ni­ge, das gera­de ein­ge­blen­det wird. Das Bild im gel­ben Rahmen ist das zuletzt sicht­ba­re Bild, das Bild mit dem grü­nen Rahmen liegt ganz unten und spielt für den aktu­ell ablau­fen­den Vorgang kei­ne Rolle.

So gehts

Wir haben drei Bilder, die wir nach­ein­an­der über­blen­den möch­ten. Sie befin­den sich in einem DIV namens “bil­der­sta­pel”.

<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 funk­tio­niert das so: Die Bilder wer­den per CSS zunächst über­ein­an­der gelegt. Es gibt drei ver­schie­de­ne Ebenen, die per z-index defi­niert sind. Das Bild, zu dem über­ge­blen­det wer­den soll, hat die CSS-Klasse “obers­tee­be­ne” (roter Rahmen). In ihr ist defi­niert, dass das Bild auf der obers­ten Ebene liegt (z-index: 3) und kom­plett trans­pa­rent ist, die Deckkraft (CSS-Attribut “opa­ci­ty”) ist also 0%. Ein dar­un­ter lie­gen­des Bild hat die Deckkraft 100% (scheint durch) und ist für den Betrachter jetzt zu sehen (gel­ber Rahmen). Es hat den z-index 2. Das drit­te Bild ist das Bild, das als letz­tes über­ge­blen­det wird. Es hat den z-index 1 und einen grü­nen Rahmen.

Zunächst wird das Bild mit der CSS-Klasse “obers­tee­be­ne” aus­ge­wählt und in der Variable $alt gespei­chert. Direkt danach wird das Bild aus­ge­wählt, zu dem über­ge­blen­det wer­den soll – ent­we­der das nächs­te benach­bar­te Bild, oder, falls kei­nes mehr exis­tiert, das ers­te Bild des DIVs “bil­der­sta­pel”. Dieses Bild ist in $neu zu fin­den. Das Bild $alt wird dann auf die mitt­le­re Ebene gesetzt. Das Bild $neu, zu dem wir über­blen­den möch­ten, bekommt die Deckkraft 0% zuge­wie­sen und wird auf die obers­te Ebene geschickt. Es ist jetzt kom­plett trans­pa­rent, das Bild dar­un­ter scheint durch. Jetzt beginnt die Überblendung mit der Methode ani­ma­te() von jQuery. Die Deckkraft wird lang­sam von 0% auf 100% erhöht.

function daumenKino() {
  var $alt = $('#bilderstapel IMG.obersteebene');

  if($alt.next().length)
    var $neu = $alt.next();
  else
    var $neu = $(‘#bil­der­sta­pel IMG:first’);

  $alt.addClass(‘mittlereebene’);
  $alt.removeClass(‘obersteebene’);
  $neu.css({opacity: 0.0});
  $neu.addClass(‘obersteebene’);

  $neu.animate({opacity: 1.0}, 2000, func­tion() {
    $alt.removeClass(‘mittlereebene’);
  });
}

Danach ist die Überblendung abge­schlos­sen. Das obers­te Bild hat nun 100% Deckkraft und über­la­gert alle ande­ren Bilder. Wenn nun das nächs­te Bild ein­ge­blen­det wer­den soll, kann der gan­ze Vorgang ein­fach ohne ver­än­der­te Parameter neu gestar­tet wer­den. Die Funktion daumenKino() wird über setInterval() peri­odisch ange­sto­ßen:

$(document).ready(function() {
   setInterval( "daumenKino()", 2000 );
});

Mehr über ani­ma­te() fin­den Sie in der eng­li­schen Dokumentation von jQuery. Wenn Sie den Effekt selbst ein­set­zen möch­ten: In der Beispieldatei fin­den Sie alles, was Sie dazu benö­ti­gen. Viel Spaß und viel Erfolg! (tm)

14 Kommentare

  1. Hallo,
    sehr gut dass dies so schön über­blen­det wird.

    1) Nur wie löse ich das, dass ich zusätz­lich zu jedem Bild einen Link set­ze, ein­fach gesagt, jedem Bild einen Link zuord­nen wo man bei Klick auf die­sen gelei­tet wird.

    2) Wie kann ich zusätz­lich einen eine Direktwahl ein­bau­en zB 1 2 3 4 5 wo ich ein Bild mit Klick direkt ansteu­ern kann (falls man zB das vor­he­ri­ge noch­mal sehen will)

  2. Tolle und ein­fa­che Anleitung. Danke.
    Leider bekom­me ich es mit mehr Bilder ein­fach nicht rich­tig hin.
    Was muß ich dabei beach­ten?

    Gruß Hobby-Prog

  3. Weiss jemand wie man den Intervall steu­ern kann, so daß das ers­te Bild 2 Sek. dau­ert bis es star­tet und dann alle 4 sek. eine Überblendung statt fin­det? Wen ich den Intervall mit 2000 star­te und ani­ma­te auf 4000 set­ze gibt es voll den Hickhack. Hat wer Rat?

  4. Hallo – dan­ke für das net­te Skript, genau so etwas habe ich gera­de gesucht!

    Ich muss­te aller­dings fest­stel­len dass das Beispiel auf die­ser Seite mit Opera 9.27/Mac nur umschal­tet und nicht umblen­det (PC-Opera hab ich noch nicht getes­tet). FF2(Mac) und Safari3(Mac), sowie IE6(PC) lau­fen gut.

    Gibt’s zu Opera viel­leicht noch irgend­wel­che Ideen?

  5. das rucke­len kann man etwas redu­zie­ren, indem man die über­blend­ge­schwin­dig­keit anhebt – so zumin­dest mei­ne erfah­rung mit ähn­li­chen jque­ry anwen­dun­gen.

  6. @Björn: img ste­hen viel­leicht nicht auf “posi­ti­on: abso­lu­te”? Platzieren muss man die Bilder dann z.B. mit einem über­ge­ord­ne­ten DIV.

    @Thomas Weise: Ob beim Überblenden etwas ruckelt, auf­blitzt oder auch nicht hängt ganz maß­geb­lich vom Browser bzw. vom Rechner ab, auf dem der Browser läuft. Je weni­ger Ressourcen vor­han­den sind des­to eher ruckelt etwas.

  7. Hallo,
    vie­len Dank für das super Script. Leider hab ich damit noch ein Problem mit dem IE6, da wer­den mei­ne 3 Titelbilder ein­fach unter­ein­an­der dar­ge­stellt.

    Kann mir jemand sagen, was ich vergessen/falsch gemacht hab? Das Script läuft im Firefox ein­wand­frei, so wie es sein soll…

    Danke für even­tu­el­le Tipps ;-)

  8. Schick Schick, für alle Intressierte gibt es da auch noch dho­ni­show, ist sehr Flexible was die Anpassung belangt und doch ein­fach zu hand­ha­ben, basiert auf pro­to­ty­pe.

  9. Ah na Lob liest man immer ger­ne :) Gruß an alle!

  10. Vielen Dank für die Anleitung – Ein ech­ter Mehrwert!
    Gibt es sol­che Funktionen eigent­lich auch schon in den gro­ßen CMS Systemen fer­tig ein­ge­baut ?

  11. ähn­lich gut lässt sich das übri­gens auch mit der YUI oder script.aculo.us (oder ver­mut­lich jeder ande­ren JS libra­ry) rea­li­sie­ren. pri­ma grund­la­gen­wis­sen jeden­falls, dan­ke herr schmidt.

  12. Vielen Dank für das Daumenkino. Da ich vie­le Fotos auf mei­ner Website ver­wen­de, kommt es sicher bald zum Einsatz.

  13. Sehr schön, auch von mir ein herz­li­ches Dankeschön, sowas habe ich schon län­ger gesucht.

    ciao

  14. Eine fei­ne Sache, ganz ohne Ruckeln und IE-taug­lich.
    Danke für die sehr gute Anleitung!

Schreibe einen Kommentar zu Björn Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.