Ich habe soeben eine kleine jQuery-Slideshow als Plugin auf jQuery.com veröffentlicht: Simple FadeSlideShow (Vorschau / Demo)
Es herrscht nun wirklich kein Mangel an Slideshows mit großem Funktionsumfang auf jQuery-Basis, aber genau das hat mich heute morgen gestört, als ich auf der Suche nach einer kleinen flexiblen Slideshow war, die wirklich nicht mehr können muss, als Bilder mit einem „Fade“-Effekt zu überblenden.
Natürlich hätte ich nach einer kleinen Slideshow suchen können und mit Sicherheit hätte ich auch genau dass gefunden, wonach ich gesucht habe, aber in der Zeit konnte ich genauso gut eine eigene kleine Slideshow schreiben, und genau das habe ich auch getan.
Die „Simple FadeSlideShow“ zeichnet sich durch ihre Flexibilität und schlanke Größe aus. Sie ist gerade einmal 2,4kb groß und macht vom Funktionsumfang her auch wirklich nicht mehr, als Bilder oder andere Inhalte (Texte, Videos usw.) mit einem Fade-Effekt zu überblenden.
So ist die „Simple FadeSlideShow“ genau das richtige Script für alle, die wirklich nicht mehr wollen als einen simplen Bild- / Content-Slider.
Die Slideshow lässt sich extrem einfach in jede Webseite integrieren und benötigt nicht einmal extra CSS-Definitionen, um zu funktionieren. Alle benötigten CSS-Definitionen schreibt das Slideshow-Script von alleine in die entsprechenden Elemente als InlineStyle. Als JavaScript-Alternative sollte man als umsichtiger Webdesigner jedoch eine entsprechende Version über CSS zur Verfügung stellen.
Wie bereits erwähnt, ist die Slideshow sehr flexibel und kann vom HTML-Konstrukt her in allen erdenklichen Varianten aufgebaut werden; z.B.
als Liste:
<ul id="slideshow">
<li><img src="images/slide-2.jpg" width="730" height="448" border="0" alt="" /></li>
<li><img src="images/slide-1.jpg" width="730" height="448" border="0" alt="" /></li>
</ul>
oder mit Div-Tags:
<div id="slideshow">
<div><img src="images/slide-2.jpg" width="730" height="448" border="0" alt="" /></div>
<div><img src="images/slide-1.jpg" width="730" height="448" border="0" alt="" /></div>
</div>
oder, oder, oder …
Der Funktionsaufruf ist dabei denkbar einfach:
$(document).ready(function(){
$('#slideshow').fadeSlideShow({
width:730, // Weite der Slideshow
height:448, // Höhe der Slideshow
speed:'slow', // Geschwindigkeit der Übergangsanimation
interval:10000 // Zeit, bis ein neues Bild eingeblendet wird (1000 = 1 Sekunde)
});
});
Weitere Informationen finden Sie auf der entsprechenden jQuery Projekt-Seite: plugins.jquery.com/simplefadeslideshow/
Eine Demo gibt es hier: www.simplefadeslideshow.com