The third sample extends the samples one and two by the possibility to show multiple (in this sample 2) slideshows on one webpage.

The file names "be_slide.html" and "be_slide.js" correspond with the file names in the sample that comes with the download of the script at JavaScript: slideshow. The following explanatory notes also refer to these files and show how to integrate the script from the HTML-page and set the parameters in the downloaded JavaScript be_slide.js.

be_slide.html - the webpage

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

The sample assumes, that the script is located in the same directory as the webpage, otherwise the path has to be adjusted

Now we add the settings for the slideshow and call it:

 
<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">
    //this line opens a new SCRIPT-Tag
 
var pics1=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
    //In this array, set the pictures you want the 1. slideshow to display.
    //They are uploaded to a subdirectory "pics" in this sample
 
var buttons1=new Array ('bwd.png', 'start.png', 'stop.png', 'fwd.png');
    //As we want to show control-elements for the 1. slideshow, we add the 
    //settings for them. We may choose between textlinks
    //and buttons. Into this array therefor we insert either the text
    //to be displayed or the path to the images to be used.
    //If the script finds either .jpg or .gif or .png as the
    //ending of your input, it will display the image automatically.
    //The sort order of the elements displayed and therefor within this
    //array is: BACK - START - STOP - FWD
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //This line calls the first slideshow.
    //You find an extended description in sample 02
 
var pics2=new Array ('pics/pic02a.jpg', 'pics/pic02b.jpg', 'pics/pic02c.jpg');
    //In this array, set the pictures you want the 2. slideshow to display.
    //Again, uploaded to a subdirectory "pics" in this sample
 
var be_1= new be_slideshow("1",pics2,"slideshow2",400,300,"#ccc",1,1,20,"y","n","n");
    //This line calls the second slideshow.
    //You find an extended description in sample 02
 
    //The second slideshow does´nt make use of control-elements, therefor there
    //is no array for them. If we would want to show them, we could reuse the
    //buttons we set for the first slideshow by setting buttons1 as the value
    //of the 13. parameter.
 
    //New in this call are the name be_1 and the value of the first parameter "1".
    //We use them in ascending order. A third slideshow on this page would be
    //called with the variable be_2 and assign "2" to the first parameter. . . and so on.
 
</script>
    //The last line closes the 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>

That´s it for the webpage.

be_slide.js - the scriptfile

var be_0= new be_slideshow();

//var be_0= new be_slideshow();