Das dritte Beispiel erweitert die in den ersten beiden Beispielen gezeigten Möglichkeiten nun noch um die Darstellung mehrerer Slideshows auf einer Seite. Die Annahme: Auf einer Seite sollen mehrere (im Beispiel 2) Slideshows dargestellt werden.

Die Bezeichnungen "be_slide.html" und "be_slide.js" entsprechen den Dateinamen in dem Beispiel, das im Download des Scripts hier Javascript: Slideshow enthalten ist. Die nachfolgenden Erklärungen beziehen sich auf die Dateien im Beispiel und erläutern nur die Einbindung in eine Webseite und die Konfiguration des heruntergeladenen Scripts be_slide.js.

be_slide.html - die Webseite

<script type="text/javascript" src="be_slide.js"></script>

Das Beispiel geht davon aus, dass das Script im selben Verzeichnis liegt wie die Webseite.
Andernfalls ist der Pfad entsprechend anzupassen.

Und jetzt ergänzen wir diesen Eintrag um unsere Angaben und den eigentlichen Aufruf:

 
<script type="text/javascript" src="be_slide.js"></script>
<script type="text/javascript">
var pics1=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
var buttons1=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png');
var be_0= new be_slideshow("0",pics1,"slideshow1",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
 
var pics2=new Array ('pics/pic02a.jpg', 'pics/pic02b.jpg', 'pics/pic02c.jpg');
var be_1= new be_slideshow("1",pics2,"slideshow2",400,300,"#ccc",1,1,20,"y","n","n");
</script>

<script type="text/javascript">
    //diese Zeile öffnet einen neuen SCRIPT-Tag
 
var pics1=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
    //In diesem Array werden die Bilder angelegt, die die erste Slideshow verwenden soll.
    //In diesem Beispiel liegen sie in einem Unterverzeichnis "pics".
 
var buttons1=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png');
    //In diesem Array werden die Kontrollelemente festgelegt. Verwenden wir keine,
    //dann brauchen wir auch diesen Array nicht! Die Zeile ist also optional.
    //Bei den Kontrollelementen hat man die Wahl zwischen Textlinks und grafischen
    //Buttons. In diesem Array werden dementsprechend entweder der Text für die
    //Textlinks oder der Pfad zum Button eingetragen. Findet das Script die Endung
    //.jpg, .gif oder .png, dann wird der Button angezeigt, ansonsten ein Textlink
    //die Reihenfolge der Kontrollelemente und damit auch der Elemente in diesem 
    //Array ist: ZURÜCK - START - STOP - VOR
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //Diese Zeile ruft die erste Slideshow auf.
    //Eine genaue Beschreibung findet sich bei Beispiel 02
 
var pics2=new Array ('pics/pic02a.jpg', 'pics/pic02b.jpg', 'pics/pic02c.jpg');
    //In diesem Array werden die Bilder angelegt, die die zweite Slideshow verwenden soll.
 
var be_1= new be_slideshow("1",pics2,"slideshow2",400,300,"#ccc",1,1,20,"y","n","n");
    //Diese Zeile ruft die zweite Slideshow auf.
    //Eine genaue Beschreibung findet sich bei Beispiel 02
 
    //Die zweite Slideshow verwendet keine Kontrollelemente, deshalb auch kein Array dafür.
    //Wollten wir Kontrollelemente anzeigen, dann könnten wir natürlich auch die Buttons
    //der ersten Slideshow verwenden und diesen Array als letzten Parameter angeben.
 
    //Neu ist hier die Bezeichnung be_1 und der Wert des ersten Parameters "1".
    //Diese verwenden wir in aufsteigender Reihenfolge. Eine dritte Slideshow auf
    //der selben Seite hätte hier die Variablenbezeichnung be_2 und als Wert des
    //ersten Parameters "2" ... und so weiter.
 
</script>
    //Die letzte Zeile schließt den SCRIPT-Tag.
 

<div id="slideshow1" style="margin:25px;">
  <img src="pics/pic01a.jpg" style="width:400px;height:300px;" />
</div>
 
<div id="slideshow2" style="margin:25px;">
  <img src="pics/pic02a.jpg" style="width:400px;height:300px;" />
</div>

Damit sind in der Seite selbst alle nötigen Vorbereitungen getroffen.

be_slide.js - die Scriptdatei

var be_0= new be_slideshow();

//var be_0= new be_slideshow();