Blog, JavaScript / DHTML

jQuery Fade Slideshow Plugin selber programmieren

WordPress Entwickler und Webdesigner

Vergangene Woche habe ich ein kleines jQuery Plugin für eine meiner Webseiten geschrieben, eine kleine Fade Slideshow. Da die Slideshow relativ einfach ist und gerade einmal ca. 2,5kb Code umfasst, ist dieses Plugin genau richtig um euch einen kleinen Einblick in die jQuery Plugin Entwicklung zugeben.

Eine Demo der Slideshow findet ihr unter folgender Adresse: http://www.simplefadeslideshow.com/
Eine Anleitung zu dem Plugin findet ihr auf der jQuery.com Webseite: http://www.simplefadeslideshow.com/documentation/

Jeder der die Slideshow im kompletten Umfang oder auch nur Teilbereich übernehmen möchte darf dies gerne unter den Bedingungen der MIT oder GNU GPL v.3 Lizenz tun.

Der HTML-Code für die Slideshow:

<ul id="slideshow">
    <li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- Dies ist das letzte Bild in der Slideshow -->
    <li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- Dies ist das erste Bild in der Slideshow -->
</ul>

Kommen wir nun zu dem eigentlichen Plugin. Fangen wir einmal damit an, wie das Plugin später vom Benutzer aufgerufen wird:

Anzeige:




// jQuery = $ - Bei der Funktion jQuery bzw. $ handelt es sich um eine Selections Funktion
// um z.B. das komplette HTML Dokument zu selektieren jQuery(document)
// Die ready() Funktion sorgt dafür, dass die darin enthaltenen Funktionen erst ausgeführt werden,
// wenn der komplette HTML Baum (DOM) geladen wurde
jQuery(document).ready(function(){
        // jQuery('#slideshow') selektiert ein HTML Element mit der id "slideshow"
        // und wendet die Funktion "fadeSlideShow" darauf an
	jQuery('#slideshow').fadeSlideShow({
                // Die Parameter im fadeSlideShow Funktionsaufruf bilden die Option des jQuery Plugins
                // Diese Optionen sind optional, es wäre auch möglich die Funktion nur so aufzurufen:
                // jQuery('#slideshow').fadeSlideShow();
                // Dies setzt allerdings voraus, dass die Standard Optionen für den eigenen Bedarf der Funktion
                // ausreichen bzw. passen
		width:640, // Dieser Parameter setzt die Weite der Slideshow fest
		height:480, // Dieser Parameter setzt die Höhe der Slideshow fest
		speed: 'slow', // Dieser Parameter setzt die Geschwindigkeit der Animation fest
		interval:5000 // Dieser Parameter bestimmt in welchem Abstand ein neues Bild angezeigt wird 1000 = 1 Sekunde
	});
});

Dieser Funktionsaufruf alleine funktioniert natürlich noch nicht, da keine Funktion bzw. das Plugin fadeSlideShow noch gar nicht existiert. Wie dieses Script aussieht und wie es funktioniert seht ihr hier im:

Die Lizenzbedingungen im oberen Bereich des Scripts sind natürlich keine Voraussetzung für ein jQuery Plugin, ich habe sie der Vollständigkeit halber aber mit aufgenommen.

Kopiert euch das lange Script mit Anleitung am besten in einen Texteditor, dass ist einfacher als immer den Scrollbalken hier hin und her zu schieben.

/*!
 * fadeSlideShow
 * v.1.0.0
 *
 * Copyright (c) 2010 Pascal Bajorat (https://www.pascal-bajorat.com)
 * Dual licensed under the MIT (below)
 * and GPL (http://www.gnu.org/licenses/gpl.txt) licenses.
 *
 *
 * https://www.pascal-bajorat.com
 
MIT License
 
Copyright (c) 2010 Pascal Bajorat
 
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 */
 
// Mit jQuery.fn.fadeSlideShow = function(options) definieren wir, dass es sich
// bei diesem Script um ein jQuery Plugin handelt mit dem Funktionsnamen "fadeSlideShow"
// Das "options" in den Klammern der Funktion, ermöglicht die Variablen Übergabe des Parameter Arrays des Funktionsaufrufs
jQuery.fn.fadeSlideShow = function(options) {
        // return this.each Definiert die Rückgabe und Funktion des Plugins
	return this.each(function(){
                // Hier wird die Variable "options" um die Standard Werte unseres Scriptes erweitert
                // Wenn der Benutzer im fadeSlideShow Funktionsaufruf selber Optionen definiert
                // werden diese hier überschrieben
		settings = jQuery.extend({
     		width: 800,
     		height: 600,
			speed: 1000,
			interval: 10000
	 	}, options);
 
		// Hier wird eine Reihe an CSS Werten auf die ID angewendet auf die diese Funktion aufgerufen wird
                // Bei diesem Beispiel von oben würde das "this" also "#slideshow" als Selector liefern
		jQuery(this).css({
			width: settings.width, // Die #slideshow erhält die Weiten Werte aus der vom User angegebenen Option oder Alternativ die Standardwerte
			height: settings.height, // Die #slideshow erhält die Höhen Werte aus der vom User angegebenen Option oder Alternativ die Standardwerte
			position: 'relative', // Die #slideshow erhält die position Angabe relative
			overflow: 'hidden' // und overflow hidden
		});
 
		// Hier werden Styles auf das nächste Child Element der Id #slideshow angewendet, "this" in diesem Beispiel #slideshow
                // wie oben bereits erwähnt
		jQuery('> *',this).css({
			position: 'absolute', // Die Elemente erhalten alle ein position absolute und überlagern sich somit
			width: settings.width, // wieder die Weiten
			height: settings.height // und Höhen Angaben aus den Optionen. Entweder vom Nutzer angegeben oder Standards
		});
 
		// Zählt die Anzahl der Bilder in der Slideshow von 1 an
		Slides = jQuery('> *', this).length; // Enthält in unserem HTML Beispiel von oben jetzt den Wert 4
                // Da der Index von HTML Elementen bei 0 und nicht bei 1 beginnt ziehen wir hier "-1" von der Anzahl ab
		Slides = Slides - 1; // Enthält nun den Wert 3
                // Da unser letztes Bild (von der HTML Struktur her) in der Slideshow als erstes angezeigt wird,
                // setzen wir die Variable mit dem Index des ersten Bildes auf den Index des letzten li's
		ActSlide = Slides; // Enthält nun den Wert 3
		// Wir speichern die Selektions-Funktion für die Subelemente, im Beispiel zu den li's zwischen
		jQslide = jQuery('> *', this);
 
                // Wir setzen den Interval der in dem, in den Optionen angegebenen Zeitabstand
                // die enthaltene Funktion immer wieder ausführt - In unserem Beispiel alle 5 Sekunden
		intval = setInterval(function(){
                        // Nach den ersten 5 Sekunden wird hier nun als z.B. unser li mit dem Index 3 (entspricht dem 4 li von der HTML Struktur her) ausgefadet
                        // Da der Index wie bereits erwähnt im DOM bei 0 anfängt muss hier entsprechend mit 3 und nicht 4 gearbeitet werden
			jQslide.eq(ActSlide).fadeOut(settings.speed); // settings.speed enthält hierbei die Animationsgeschwindigkeit aus den Optionen
                        // Bei dieser If Abfrage wird getestet ob die Variable ActSlide bei 0 angelangt ist, wenn ja wird die Slideshow auf das erste Bild zurückgesetzt
			if(ActSlide <= 0){
                                // Alle Bilder werden wieder eingeblendet und die Slideshow fängt bei Bild 1 bzw vom Dom Index bei Bild 3 wieder an
				jQslide.fadeIn(settings.speed);
                                // Die ActSlide Variable wird zurückgesetzt auf 3
				ActSlide = Slides;
			}else{
                                // Wenn ActSlides größer als 0 ist wird hier "-1" abgezogen
				ActSlide = ActSlide - 1;	
			}
		}, settings.interval);
                // Nach 5 Sekunden wird diese Funktion erneut ausgeführt
	});
};

Ich hoffe ich konnte euch das ganze soweit verständlich erklären und ihr könnt mit der Erklärung etwas anfangen. Falls ihr noch Fragen haben solltet, schreibt einfach ein Kommentar und ich werde euch eure Frage beantworten.

Wem das Script gefällt, der könnte ja einmal den „gefällt mir“ Button drücken.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

8 Antworten zu “jQuery Fade Slideshow Plugin selber programmieren”

  1. Ich bin mir nicht sicher, deshalb eine Frage:
    kann ich die oberen 3 genannten Codes in den umrahmten FELDERN
    so hintereinander für meinen Index einsetzen? …mit meinen Fotolinks im ersten FELD.

    Das 1., 2. und 3. Feld hintereinander nach dem Head der Webseite einsetzen ?

    Vielen Dank Leonard

  2. Hallo Pascal,
    super Anleitung, danke!
    Meine Frage: Wie kann man (möglichst simpel) zu deinem Tutorial einen overlay Bereich am unteren Bereich mit einblenden der das Bild beschreibt, mit Titeln etc.?

    Vielen Dank

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.