Diashow starten

Jetzt geht es daran, die Diashow zu starten. Hierfür ergänzen Sie im head-Bereich Ihres Dokuments einen weiteren JavaScript-Bereich, in dem Sie den benötigten Code angeben. Dieser muss nach dem Code zum Einbinden von jQuery und dem Cycle-Plug-in stehen.

<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();
});
</script>

Testen Sie dann Ihre Diashow. Sie sollte jetzt schon funktionieren - die Bilder werden automatisch nacheinander angezeigt und auch schön eingeblendet.

Nun eine kurze Erläuterung zu dem, was Sie hier eigentlich geschrieben haben: Die erste und die letzte Zeile des JavaScript-Codes selbst gehören zusammen: Sie stellen sicher, dass der Code, der dazwischen steht, erst ausgeführt wird, wenn das ganze HTML-Dokument geladen wurde.

$(function() {
// hier steht der Code zum Ausführen
});

Klammern!

Achten Sie auf den Abschluss: zuerst eine geschweifte, dann eine runde Klammer und schließlich ein Strichpunkt.

Ein paar Hintergrundinfos für JavaScript-Programmierer: Falls Sie schon mit JavaScript programmiert haben, kennen Sie wahrscheinlich den folgenden Ausdruck: window.onload=ausfuehren;

Dieser bewirkt, dass die Funktion ausfuehren() erst ausgeführt wird, nachdem das gesamte Dokument geladen ist. Das ist wichtig bei DOM-Manipulationen, wenn HTML-Elemente über JavaScript verändert werden. Das bei jQuery verwendete

$(function() {})

macht genau dasselbe. Es ist nur etwas eleganter, da nicht auf alle externen Dateien, wie z. B. Bilder, gewartet wird, sondern nur auf den HTML-Code.

Statt der Schreibweise $(function() {}); werden Sie bei der Verwendung von jQuery auch häufiger folgende ausführliche Schreibweise sehen:

$(document).ready(function() {
//Hier steht der Code zum Ausführen
});

Noch eine Erläuterung zur Zeile, die dazwischen steht:

$('#bilder').cycle();

Dieser Ausdruck wählt das Element mit id="bilder" aus und startet das Cycle-Plug-in.

Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Effektvolle Diashow über Cycle : Diashow starten

Auf dieser Seite

Klammern!