jQuery ist ein unglaublich einfaches Framework. Leicht zu durchschauen und auch für Anfänger sehr leicht zu verstehen. Grund genug euch heute zu zeigen, wir Ihr euch mit nur wenigen Zeilen Javascript Code eine Slideshow basteln könnt. Ich versuche hierbei auch die einzelnen Schritte sogut es geht zu beschreiben, es kann natürlich sein, dass es mir nicht immer gelingt:)

Die Livedemo

Besorgt euch jQuery und das Plugin

Um dieses Tutorial nutzen zu können, benötigt Ihr natürlich jQuery selbst, sowie das Plugin. jQuery könnt Ihr euch auf der jQuery Webseite downloaden, dass Cycle Plugin findet Ihr hier.

Schritt 1: Das HTML Markup

Das HTML Layout wird ziemlich einfach gehalten. Ihr erstellt eine neue Datei, diese nennt ihr index.html und kopiert den folgenden Code hinein.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


	
 

Wie Ihr seht, habe ich ein wirklich sehr einfaches HTML Markup erstellt, mit einem Div Container, der die ID “myslides” besitzt. In diesem Div Container habe ich drei Bilder eingefügt. Es ist sehr wichtig, dass Ihr alle Bilder in diesen Div Container einfügt. Warum, werden wir später sehen.

Die CSS Datei

Das nächste ist nun natürlich die CSS Datei. Diese liegt im gleichen Ordner, wie unsere oben erstellte index.html

body {
    background: rgb(50,50,50);
}
#myslides {
    width: 370px;
    height: 220px;
    padding: 0;
    margin:  0 auto;
} 
#myslides img {
    padding: 10px;
    border:  1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top:  0;
    left: 0
}

So, was haben wir nun gemacht? Ich habe den Div Container, indem sich die Bilder befinden ( in unserem Falle der Div Container mit der ID “myslide”) eine feste Höhe sowie Breite gegeben. Ich habe in diesem Beispiel die gleiche Größe genommen, wie Bilder plus natürlich der Abstand durch das Padding.

Nachdem wir nun unsere HTML sowie CSS Datei erstellt haben, sollte euer Ergbeniss nun etwa so aussehen.

Schritt4: Der Javascript Einsatz

Nun müssen wir unsere Javascripte in den Head Bereich einbinden. Die letzte jQuery Version, sowie unser Cycle Plugin. Beide Dateien packt Ihr am besten in einen Ordner un nennt ihn “js”, der Übersichtshalber.

	
...

Als nächstes erstellen wir unser kleines Script, dass den gewünschten Effekt bringt.

$(document).ready(function(){
	$('#myslides').cycle();
});

Was haben wir nun genau gemacht? Eigentlich recht simpel. Wie bei fast jedem Javascript, sagen wir dem Browser, wenn das Dokument geladen ist, führe die folgende Funktion aus. In der zweiten zeile sagen wir, nehm den Div Container mit der ID “myslides” und gebe Ihn praktisch an unser Cycle Plugin weiter.
Nun sollte unser Ergebniss etwa so aussehen.

Anpassen

Nun müssen wir unser Script noch anpassen. Auch das ist wieder recht simpel. Wenn wir nun den Effekt haben wollen, dass ein Bild in das andere übergeht, benötigen wir folgenden kleinen Code

Eine Liste der Effekte, die das Cycle Plugin bietet, findet Ihr hier http://malsup.com/jquery/cycle/

$('#myslides').cycle({
	fx: 'cover'
});

Recht simpel oder? Nun möchten wir diesen “cover” Effekt noch ein wenig schneller darstellen. In jQuery sind 1000 millisekunden eine Sekunde. Wir wollen also, dass sich alle vier Sekunden das Bild wechselt.

$('#myslides").cycle({
	fx: 'cover',
	speed: 4000
});

Zuletze möchten wir noch die Zeit der Übergänge festlegen. In diesem Fall zwei Sekunden. Wir fügen also folgenden Code ein:

$('#myslides').cycle({
	fx: 'cover',
	speed: 500,
	timeout: 2000
});

Das wars, unser Endergebniss:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">