JavaScript Slideshow mit Prototype und Scriptaculous
Veröffentlicht am 23.04.2010 | Kommentar schreiben | Tags: html, javascript
In diesem Artikel wird eine simple Slideshow von Bildern vorgestellt. Zum Einsatz kommen dabei die beiden Frameworks Prototype und Scriptaculous.
Das Skript erwartet ein DIV mit einer ID die im Beispiel mit slide angegeben ist. In dieses DIV werden die Bilder nach und nach eingeblendet. Es ist wichtig, dass das DIV eine Mindestgröße hat, da es sonst zu unschönen Sprüngen in der Darstellung kommen kann.
function Slideshow() { // id from div-box this.div_box = 'slide'; // time for display (sec) this.display_time = 2; // time for image change (sec) this.change_time = 2; // images this.images = $w('bild1.jpg bild2.jpg'); } Slideshow.prototype.start_slide = function() { // get next image var image = this.images.shift(); // add image again this.images.push(image); // write image $(this.div_box).update('<img src="' + image + '" id="slide_image" style="display:none;" />'); // call slideshow this.next_image(); } Slideshow.prototype.next_image = function() { var j = this; // slideshow $('slide_image').appear({ duration: this.change_time, afterFinish: function() { // get next image var image = j.images.shift(); // add image again j.images.push(image); // write background image $(j.div_box).setAttribute('style', 'background: url(' + $('slide_image').src + ') no-repeat;'); // write image $(j.div_box).update('<img src="' + image + '" id="slide_image" style="display: none;" />'); // next image window.setTimeout(function(){j.next_image();}, j.display_time * 1000); } }); }
Damit die Slideshow initialisiert wird, muss zunächst ein Objekt der Klasse Slideshow erzeugt werden. Anschließend wird durch den Aufruf der Funktion start_slide() die Slideshow gestartet. In dem Javascript-Code können noch ein paar Einstellungen gemacht werden. Zum einen kann die ID der DIV-Box angegeben werden, diese wird durch die Klassen-Variable div_box beschrieben. Durch change_time wird die Überblendungszeit und durch display_time die Anzeigedauer beschrieben.
<script type="text/javascript"> slideshow = new Slideshow(); slideshow.start_slide(); </script>
Ein Beispiel für eine Anwendung kann unter der Adresse http://www.hann3mann.de/fileadmin/upload/beispiel/slideshow/ angesehen werden.
- Weiterführende Links
- script.aculo.us
- www.prototypejs.org
Noch keine Kommentare vorhanden