Startseite Javascript Slideshow - Slideshow Beispiel 03
JavaScript: Slideshow Beispiel03
Geschrieben von: Andreas Berger   
Sonntag, den 01. März 2009 um 12:31 Uhr

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

Der erste Schritt zur Verwendung ist auch diesmal die Einbindung des Scripts in die Webseite. Wie im Beispiel 02 möchten wir das Script auch hier mit verschiedenen Slideshows ansprechen. Nur diesmal auf der selben Seite. Dazu müssen wir im HEAD-Bereich der Seite nicht nur das Script verlinken, sondern auch die jeweiligen Einstellungen für unsere Slideshows festlegen. Zuerst das Script:
<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>
Die einzelnen Schritte:
<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.
 
Im BODY-Bereich der Seite werden diesmal nun zwei DIV-Container eingefügt, die die Slideshows enthalten werden. Wichtig wieder die IDENTITY, in diesem Fall "slideshow1" (id="slideshow1") und "slideshow2" (id="slideshow2"). Die Container können beliebig positioniert und formatiert werden.
Auch in diesem Beispiel binden wir statisch je eins der Bilder ein.

<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

Im heruntergeladenen JavaScript-File "be_slide.js" sollte man jetzt die einzelnen Standardwerte setzen (diese sind in Beispiel 01 ausführlich erklärt). Unbedingt erforderlich, damit die Verwendung mit verschiedenen Einstellungen wie hier beschrieben funktioniert ist aber, dass wir den im Script enthaltenen Standardaufruf löschen oder besser auskommentieren. Dazu fügen wir in der letzten Zeile des Scripts:
var be_0= new be_slideshow();
am Beginn der Zeile die Kennzeichnung für einen einzeiligen Kommentar ein:
//var be_0= new be_slideshow();
Damit ist der Standardaufruf außer Funktion und unser oben ersteller Aufruf übernimmt.

 


Das wars. Viel Spass mit dem Script!
Zuletzt aktualisiert am Donnerstag, den 26. November 2009 um 18:49 Uhr
 
Kommentare (1)
Bilderspezifische Zeitwechseleinstellung
1 Donnerstag, den 24. November 2011 um 15:58 Uhr
Olaf B

Ich möchte gerne das das Startbild, länger angezeigt wird, als die anderen Bilder. Kann man das realisieren?

@Olaf B
Donnerstag, den 24. November 2011 um 22:41 Uhr
A. Berger

Hallo Olaf!

Realisieren kann man das natürlich, man müsste das Script halt entsprechend umbauen.
Wenn die Slideshow automatisch durchläuft (also ohne Buttons), dann kannst Du aber auch einfach das Startbild 2x in den Array einfügen, das hat den selben Effekt.

Gruß
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 81 Gäste online