JavaScript / DHTML

Modernes Webdesign-Podcast jQuery SlideShow Plugin

WordPress Entwickler und Webdesigner

(Download und Vorschau der Slideshow am Ende dieser Seite) Ich habe euch hier ja bereits meine erste jQuery SlideShow vorgestellt, diese trägt den Namen: Simple fadeSlideShow (Offizielle Englische Webseite / Deutsche Anleitung auf Webdesign-Podcast.de). Mittlerweile habe ich die SlideShow die ich ursprünglich für den Webdesign-Podcast.de geschrieben habe so umprogrammiert, dass man sie relativ einfach als jQuery Plugin einbinden kann.

Diese zweite SlideShow möchte ich euch nun vorstellen und erklären. Wir fangen natürlich als erstes einmal mit dem Namen an, da die SlideShow hauptsächlich für den Webdesign-Podcast.de gedacht war und mir kein besserer Name eingefallen ist, trägt der Slider nun den langen Namen „Webdesign Podcast Slider“.

Die SlideShow ist unter der bzw. den selben Lizenzen wie auch die Simple fadeSlideShow freigegeben, also:
GNU GPL (http://www.gnu.org/licenses/gpl.txt) und der MIT Lizenz. Der Lizenz Vermerk lautet wie folgt:

Anzeige:




/*
 * Webdesign-Podcast.de SlideShow
 * v.1.5.0
 *
 * Copyright (c) 2011 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
 * https://www.webdesign-podcast.de
 
MIT License
 
Copyright (c) 2011 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.
 */

Webdesign-Podcast.de jQuery Slider / Slideshow

Die Slideshow basiert auf dem Prinzip, dass die einzelnen Slides in dem Container durchgeschoben werden. Es gibt keine Fade-Animation sondern eine Slide-Animation. Das ganze kann via AutoPlay Funktion abgespielt werden oder über die Vor- und Zurück-Buttons.

Wie bei meiner letzten SlideShow lässt sich auch diese wieder komplett über CSS anpassen. Da der Umfang der CSS-Datei diesmal aber etwas umfangreicher ist als bei der Simple fadeSlideShow gibt es eine extra CSS-Datei in der alle Anpassungen durchgeführt werden können.

Um die SlideShow verwenden zu können sind insgesamt 5 Dateien nötig:

  • jQuery
  • SlideShow JavaScript Datei
  • SlideShow CSS Datei
  • Vorwärts-Bild des Buttons
  • Zurück-Bild des Buttons

Das ganze wird folgendermaßen zwischen den <head></head> Tags eingebunden:

<link rel="stylesheet" type="text/css" href="css/webdesign-podcast-slider.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/webdesign-podcast-slider.js"></script>

Die beiden Bilder kommen in einen Ordner namens „images“, so ist es zumindest in der CSS-Datei vorgegeben, kann aber auch ohne weiteres geändert werden, wie auch der komplette Stil der SlideShow.

Die Struktur der eigentlichen SlideShow sieht dann wie folgt aus:

<div id="slideshow">
	<div class="slides">
		<div class="slide"><a href="#"><img src="images/gewinnspiel-slider.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img2.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img3.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img4.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img5.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img6.jpg" alt="" width="598" height="250" /></a></div>
		<div class="slide"><a href="#"><img src="images/img7.jpg" alt="" width="598" height="250" /></a></div>
	</div>
</div>

Die ID der SlideShow (#slideshow) kann im Gegensatz zu den Klassen (class) „slides“ und „slide“ frei gewählt werden. Es ist zwar möglich auch diese Klassen im Rahmen der Plugin Optionen zu ändern, dann muss man sich allerdings noch einmal an die CSS-Datei setzen und diese entsprechend anpassen.

Da die CSS-Eigenschaften erst auf die Slideshow angewendet werden, sobald das JavaScript nicht nur geladen sondern auch gestartet wurde ist es ratsam das die entsprechende CSS-Klasse nicht erst von dem JavaScript gesetzt werden muss, sondern manuell eingebunden wird. Das heißt Zeile 1 sollte wie folgt geändert werden:
<div id=“slideshow“ class=“WebdesignPodcastSlideShow“>

In den DIV’s mit den Klassen „slide“ können sowohl Bilder, Videos als auch Texte eingebunden werden, es ist also keine reine Bilder SlideShow.

Die Hauptfunktion der SlideShow muss unterhalb der JavaScript / CSS Integration positioniert werden. Des Weiteren funktioniert es nur, wenn die Funktion innerhalb der jQuery „$(document).ready();“ Funktion platziert wird.

Das ganze würde dann in der einfachsten Variante folgendermaßen aussehen:

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#slideshow').WebdesignPodcastSlider();
	});
</script>

Die ID #slideshow muss natürlich entsprechend der von euch verwendeten angeglichen werden. In der Regel reicht es allerdings nicht nur die normale SlideShow Funktion zu starten, sondern es müssen noch einige Optionen angepasst werden, damit die SlideShow auch zu eurer Seite passt. Wenn die Optionen nicht deklariert werden, greift die SlideShow auf die Standard Angaben zurück.

Folgende Optionen sind möglich, die gezeigten Options-Werte entsprechen dabei den Standard-Werten (diese werden also genutzt, wenn sie nicht extra von euch deklariert wurden):

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#slideshow').WebdesignPodcastSlider({
			width: 600, // Weite der Slideshow
     			height: 250, // Höhe der SlideShow
     			buttonWidth: 30, // Weite der Buttons (Vor / Zurück)
     			buttonHoverAddWidth: 10, // Pixel die beim darüber hovern dazu animiert werden
     			buttonHoverAnimationSpeed: 200, // Button Animations-Geschwindigkeit beim darüber hovern
     			buttonLeaveAnimationSpeed: 400, // Button Animations-Geschwindigkeit beim verlassen des Buttons
     			slideshowClass: 'WebdesignPodcastSlideShow', // Klasse der Slideshow
     			slidesContainerClass: 'slides', // Klasse des Slider Container der animiert wird
     			singleSlideClass: 'slide', // Klasse der einzelnen Slides die dann die Multimedia oder Text Elemente beinhalten
     			nextButtonClass: 'nextBtn', // Klasse des Vorwärts Buttons
     			prevButtonClass: 'prevBtn', // Klasse des Zurück Buttons
     			stopOnButtonClick: true, // Soll die Slideshow Autoplay Funktion bei Button klick beendet werden (true oder false)
     			slideSpeed: 600, // Animations-Geschwindigkeit der Slider
     			autoPlay: 5000 // Wie lange wird ein Slider bei laufender Autoplay Funktion angezeigt (false um Autoplay zu deaktivieren)
		});
	});
</script>

Mit diesen Angaben sollten euch alle Informationen zur Verfügung stehen, damit ihr die SlideShow selber verwenden könnt. Falls ihr noch Fragen habt, könnt ihr euch gerne über die Kommentar-Funktion an mich wenden.

Viel Spaß mit der SlideShow.

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:

4 Antworten zu “Modernes Webdesign-Podcast jQuery SlideShow Plugin”

  1. Als erstes die Galerie ist echt klasse hab sie bei mir ausprobiert funktioniert prima. Nun zu meinem Problemchen. Ich soll eine Galerie/Slideshow erstellen in der unterschiedlich große Bilder drin sein sollen ( z.B. 500x500px oder 212x836px). Ich tu mich halt schwer mit dem anpassen. Hast du da nen Tip für mich?

  2. Genau was ich gesucht habe! Danke! Könnte man eine Bildunterschrift, Text oder so aus dem alt oder title Attribut vom
    unter oder neben das Bild setzen? Wäre ganz toll!
    Danke im voraus
    Uli

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.