
Der erste Schritt zur Verwendung ist die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt:


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

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein DIV-Container eingefügt, der die Slideshow enthalten wird. Wichtig dabei ist die IDENTITY, in diesem Fall "slideshow" (id="slideshow"). Sie kann frei gewählt werden, im Script werden wir sie dann als Parameter setzen. Der Container kann beliebig positioniert und formatiert werden.

In diesem Beispiel ist bereits jetzt eines der - im Beispiel in einem Unterordner namens "pics" abgelegten - Bilder eingebunden, mit denen das Script dann arbeitet. Das hat den Vorteil, dass Besuchern mit deaktiviertem JavaScript zumindest das statische Bild angezeigt wird. Für Besucher mit aktiviertem JavaScript hat der statische Inhalt des DIV-Containers keine Relevanz, da er beim Laden der Seite vom Script ersetzt wird.


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


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

____________________________________________________________________________________________________________________

Im heruntergeladenen JavaScript-File "be_slide.js" werden jetzt die einzelnen Parameter entsprechend der gewünschten Verwendung gesetzt. Das oben angezeigte Beispiel verwendet die folgenden Einstellungen:

 

//*****parameters to set*****
 
var def_imges=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
    //In diesem Array werden die Bilder angelegt, die die Slideshow verwenden soll.
 
var def_divid="slideshow";
    //Das ist die Identity des DIV-Containers,
    //in dem die Slideshow angezeigt werden soll
 
var def_picwid=400;
    //Die Breite des breitesten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
 
var def_pichei=300;
    //Die Höhe des höchsten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
 
var def_backgr="#eeeeee";
    //Die Hintergrundfarbe der Slideshow. Sie ist von Bedeutung, wenn Bilder 
    //nicht exakt den - in den beiden vorherigen Parametern angegebenen
    //Abmessungen entsprechen.
 
var def_sdur=3;
    //Die Zeit, die ein Bild zwischen zwei Wechseln angezeigt wird in Sekunden
 
var def_fdur=1;
    //Die Zeit, die der Wechsel dauern soll
 
var def_steps=20;
    //Die Anzahl der Schritte, in denen von 100-0 überblendet werden soll
    //Ein Wert von 1 bis 100, je höher desto fließender der Wechsel
 
var def_startwhen="y";
    //Soll nach dem Laden automatisch gestartet werden? "y" für Ja, "n" für Nein
 
var def_shuffle="y";
    //Soll mit einem zufälligen Bild begonnen werden? "y" für Ja, "n" für Nein
 
var def_showcontr="y";
    //Sollen Kontrollelemente angezeigt werden? "y" für Ja, "n" für Nein
 
var def_contr=new Array('bwd.png','start.png','stop.png','fwd.png');
    //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
 
//****************************************************************
 

 
Das wars. Viel Spass mit dem Script!