The first sample shows the standard configuration of the script. The starting basis: 1 page with 1 slideshow.

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

The first step is to integrate the script into the webpage. To achieve this, it is linked from the HEAD-section of the page:

<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.

The second step is to create a DIV-container in the BODY-section of your page, located where you want the slideshow to be displayed. Of importance is the IDENTITY of this DIV-container - in this sample it´s "slideshow" (id="slideshow"). It can be chosen, within the script we will set it as value of a parameter. The DIV-container can be positioned and styled as you want. This sample inserts on of the pictures - uploaded to a subfolder called "pics" - statically into the DIV-container to provide a fallback for visitors without JavaScript.
For visitors with JavaScript enabled this is of no importance, because the script replaces the content of the DIV-container with the slideshow.

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

That´s it for the webpage.

be_slide.js - the scriptfile

Now we set the parameters in the scriptfile be_slide.js to fit our needs. The sample above uses the following values:

//*****parameters to set*****
 
var def_imges=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
    //In this array, set the pictures you want the slideshow to display.
 
var def_divid="slideshow";
    //The IDENTITY of the DIV-Containers,
    //we created to hold the slideshow
 
var def_picwid=400;
    //The width of the widest picture in pixel.
    //Notice: The script does not scale your pictures!
 
var def_pichei=300;
    //The height of the highest picture in pixel.
    //Notice: The script does not scale your pictures!
 
var def_backgr="#eeeeee";
    //The background-color of the slideshow. It is of importance
    //if you have pictures in your set, that do not fit the values
    //set above for width and height.
 
var def_sdur=3;
    //The time, a picture is shown between two transitions in seconds.
 
var def_fdur=1;
    //The time the transition should take
 
var def_steps=20;
    //The number of steps to blend from 0-100.
    //A value between 1-100, the higher the value
    // the smoother the transition.
 
var def_startwhen="y";
    //Should the slideshow start automatically?
    //"y" for Yes, "n" for No
 
var def_shuffle="y";
    //Should we start with a random picture?
    //"y" for Yes, "n" for No
 
var def_showcontr="y";
    //Should we show control-elements?
    //"y" for Yes, "n" for No
 
var def_contr=new Array('bwd.png','start.png','stop.png','fwd.png');
    //if you show control elements, you may choose between textlinks
    //and buttons. Into this array therefor insert either the text
    //you want to be displayed or the path to the image you want 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
 
//****************************************************************
 

That´s it, have fun with the script!