Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Effektvolle Diashow über Cycle

Übergangseffekte wählen

Bisher werden die Bilder eingeblendet. Es gibt viele andere Übergangseffekte, die Sie immer hinter fx angeben, z. B. scrollDown:

$('#bilder').cycle({
  fx: 'scrollDown'
});

Dadurch wird ein neues Bild von oben hergeschoben. Stattdessen können Sie es auch über scrollLeft von links, scrollRight von rechts oder scrollUp von unten erscheinen lassen.

Einen Effekt, der aussieht wie das Umblättern der Fotos, erreichen Sie über turnDown.

$('#bilder').cycle({
  fx: 'turnDown'
});

Alle möglichen Effekte sehen Sie im Folgenden aufgelistet. Probieren Sie sie ruhig einmal aus. Für die endgültige Version sollten Sie natürlich den Effekt wählen, der am besten zum Stil Ihrer Website passt.

Übergangseffekte: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom.

Auch die Geschwindigkeit, in der jeweils das neue Bild angezeigt wird, lässt sich bestimmen: Dafür gibt es die Parameter speed und timeout. speed legt fest, wie schnell der Effekt angezeigt wird, und timeout bestimmt die Zeit zwischen den Bildern. Die Werte sind immer Millisekunden. timeout: 0, das Sie eben kennengelernt haben, verhindert das automatische Ablaufen der Diashow.

Im folgenden Beispiel wird als Effekt zoom gewählt, der Abstand zwischen den einzelnen Bildern auf 3.500 Millisekunden festgelegt und als Geschwindigkeit für den Effekt 1.000 Millisekunden angegeben.

$(function(){
  $('#bilder').cycle({
    fx: 'zoom',
    timeout: 3500,
    speed: 1000
  });
});

Mehr Einstellungen

Praktisch ist ebenfalls die Option pause: 1. Damit wird die Diashow angehalten, wenn der Besucher mit der Maus darüber fährt. Sollen die Bilder in einer zufälligen Reihenfolge angezeigt werden, so geben Sie random: 1 an.

Das waren noch nicht alle Konfigurationsmöglichkeiten. Weitere finden Sie in der Dokumentation des Plug-ins unter http://malsup.com/jquery/cycle/.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren