Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Effektvolle Diashow über Cycle

Links zum Navigieren erstellen

Bisher läuft die Diashow automatisch ab. Sie können aber Ihren Besuchern auch Links bereitstellen, über die sie sich selbst durch die Bilder klicken können.

Der Benutzer kann jetzt über zwei Textlinks durch die Bilder blättern.

Hierfür ergänzen Sie erst einmal die Links in Ihrem HTML-Dokument. Im Beispiel sind es einfache Textlinks mit den Beschriftungen zurück und weiter.

<a href="#" id="zurueck">zurück</a>
<a href="#" id="weiter">weiter</a>

Wichtig ist, dass Sie den Links außerdem IDs geben, damit Sie sie per JavaScript ansprechen können.

Oder lieber Buttons statt Links?

Sie können zur Navigation auch passende Bilder anstelle von Textlinks einfügen. Versehen Sie diese ebenfalls mit einer id.

Jetzt ändern Sie den JavaScript-Code an der Stelle, wo Sie die Diashow starten. Notieren Sie dort Folgendes:

$(function() {
  $('#bilder').cycle({
    fx: 'turnDown',
    next: '#weiter',
    prev: '#zurueck',
    timeout: 0
  });
});

Klammerpaare

Beachten Sie, dass jetzt wirklich zwei Mal }); am Ende steht. Das erste Klammernpaar gehört zu $(function(){, das zweite Klammernpaar zu $('#bilder').cycle({.

Sie schreiben also hinter cycle in die runden Klammern mehrere Einstellungen in geschweiften Klammern. Diese Einstellungen definieren Sie über Parameter-Wert-Paare. Einem Parameter wird der Wert durch Doppelpunkt zugewiesen. Der Wert steht in Anführungszeichen:

next: '#weiter'

Die Parameter-Wert-Paare werden durch Komma voneinander getrennt. Die ganze Werteliste ist in geschweifte Klammern eingefasst.

Jetzt zu den einzelnen Angaben:

  • fx: 'turnDown' bestimmt die Art des Übergangs zwischen den Bildern. Sie sehen im nächsten Abschnitt, welche anderen Werte hier möglich sind. Wollen Sie hingegen den Übergangseffekt beibehalten, wie er bisher war, schreiben Sie anstelle von 'turnDown' den Ausdruck 'fade'.

  • next: '#weiter' legt fest, dass zum Weiterklicken ein HTML-Element mit der id="weiter" benutzt wird. Sie geben also hier wieder die auch in CSS gebräuchlichen Selektoren an.

  • prev: '#zurueck' definiert als Zurück-Button das HTML-Element mit der id="zurueck".

  • timeout: 0 bedeutet, dass die Diashow nicht automatisch, sondern nur durch den Benutzer gesteuert ablaufen soll. Wenn Sie es weglassen, läuft die Diashow weiter automatisch ab, reagiert aber auch auf die Klicks auf die Links durch den Benutzer.

Und hier sehen Sie das Beispiel im Gesamtzusammenhang:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Diashow mit Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
  font: 80% sans-serif;
  background-color: #fff;
}
#links {
  width:  432px;
  height: 294px;
  margin: auto;
  padding-top: 10px;
}
#bilder {
  width:  432px;
  height: 294px; 
  margin: auto;
}
#bilder img {
  padding: 15px;
  border:  1px solid #ccc;
  background-color: #eee;
  width:  400px;
  height: 262px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#bilder').cycle({
    fx: 'turnDown',
    timeout: 0,
    next: '#weiter',
    prev: '#zurueck'
  });
});
</script>
</head>
<body>
<div id="bilder">
  <img src="bilder/bild1.jpg" alt="Boot">
  <img src="bilder/bild2.jpg" alt="Leuchtturm">
  <img src="bilder/bild3.jpg" alt="Regenbogen">
  <img src="bilder/bild4.jpg" alt="Br&uuml;cke">
  <img src="bilder/bild5.jpg" alt="Steine">
  <img src="bilder/bild6.jpg" alt="Allee">
  <img src="bilder/bild7.jpg" alt="Wald"> 
</div>
<!-- Links zum Navigieren durch die Bilder -->
<div id="links">
<a href="#" id="zurueck">zurück</a>
<a href="#" id="weiter">weiter</a>
</div>
</body>
</html>

Online können Sie sich auch das als Beispiel ansehenAnzeigen.

Hinweis: Hintergrundinfos für JavaScript-Programmierer

Vielleicht kommt Ihnen die Syntax zur Angabe der Parameter ungewöhnlich vor. Diese nennt sich Objektliteral und ist eine Kurzform, um bei Objekten Eigenschaften anzugeben. Sie könnten auch ein eigenes Objekt optionen definieren und bei diesem die Eigenschaften spezifizieren:

var optionen = {
  fx: 'turnDown',
  next: '#weiter',
  prev: '#zurueck',
  timeout: 0
}

Und das wiederum ist eine verkürzte Schreibweise für:

var optionen = new Object;
optionen.fx = 'turnDown';
optionen.next = '#weiter';
optionen.prev = '#zurueck';
optionen.timeout = 0;

Die Objektliteralsyntax ist bei vielen JavaScript-Bibliotheken sehr gebräuchlich.

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