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.

Zurück zur Artikel-Übersicht


Kommentare

    Noch keine Kommentare vorhanden

     

*


*

Letzte Artikel

Letzte Kommentare