(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:
/*
* 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.
*/
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:
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:
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:
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):
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.
Download und Vorschau
Slideshow als zip Datei herunterladen (330kb) | Vorschau der Slideshow
Viel Spaß mit der SlideShow.