Startseite Javascript Slideshow - Slideshow Beispiel 02
JavaScript: Slideshow Beispiel02
Geschrieben von: Andreas Berger   
Sonntag, den 01. März 2009 um 12:30 Uhr

Im zweiten Beispiel nutzen wir die Möglichkeit, mit einer Scriptdatei verschiedene Slideshows zu bedienen. Die Annahme: Auf verschiedenen Seiten eines Internetauftritts soll jeweils 1 Slideshow 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. Nur diesmal möchten wir das Script mit verschiedenen Slideshows ansprechen. Dazu müssen wir im HEAD-Bereich der Seite nicht nur das Script verlinken, sondern auch die jeweiligen Einstellungen für unsere Slideshow 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,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
</script>
So, was haben wir gemacht:
<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 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 schlussendlich ruft die Slideshow auf.
    //Wir werden sie uns gleich genauer ansehen.
 
</script>
    //Zuvor aber schließen wir mit der letzten Zeile den SCRIPT-Tag.
 
So und jetzt zerlegen wir die Zeile mit dem Aufruf der Slideshow:
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
 
var be_0
Die jeweilige Instanz der Slideshow wird als Variable mit dem Namen be_0 definiert. Der Name ist dabei festgelegt. Er ist bei 1 Slideshow immer be_0.
be_slideshow()
be_slideshow() ist der Name der Funktion, die die Slideshow darstellt und steuert. Innerhalb der runden Klammern können dieser Funktion bis zu 13 Parameter übergeben werden. Warum "bis zu"?
Ganz einfach, weil in der Datei be_slide.js für jeden Parameter ein DEFAULT-Wert festgelegt werden kann, auf den das Script zurückgreift, wenn er beim Aufruf nicht übergeben wurde.
Verwendet man innerhalb eines Internetauftritts zum Beispiel mehrere Slideshows, die immer gleich aussehen und sich nur durch die dargestellten Bilder unterscheiden, dann kann man in der Datei be_slide.js einmal alle Einstellungen treffen (was ich ohnehin empfehle) und auf den einzelnen Seiten dann zum Beispiel nur noch den Array mit den Bildern definieren (siehe oben) und die Slideshow aufrufen wie folgt:
var be_0= new be_slideshow("0",pics1);
Prinzipiell gilt: Man muss nicht alle Parameter im Aufruf übergeben, die Reihenfolge muss aber eingehalten werden. Möchte ich mit dem dritten Parameter von der Standardeinstellung abweichen, dann muss ich die Parameter 1 und 2 auch übergeben. Treffe ich erst im 13. Parameter eine Festlegung, die vom Standardwert abweicht - dann muss ich alle 13 Parameter angeben. Jetzt aber zu den einzelnen Parametern:
 
var be_0= new be_slideshow("0");
    //Der 1. Parameter ist die Nummer der Slideshow, beginnend mit "0"
    //Die Null entspricht der Null im Namen der Variable be_0
    //(Die Frage warum die Slideshow eine Nummer braucht klären wir im 3. Beispiel)
 
var be_0= new be_slideshow("0",pics1);
    //Der 2. Parameter ist der Parameter, den wir für das Array mit den Bildern
    //festgelegt haben, im Beispiel ist das pics1.
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_imges
 
var be_0= new be_slideshow("0",pics1,"slideshow");
    //Der 3. Parameter ist die Identity des DIV-Containers,
    //in dem die Slideshow angezeigt werden soll.
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_divid
 
var be_0= new be_slideshow("0",pics1,"slideshow",400);
    //Der 4. Parameter ist die Breite des breitesten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_picwid
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300);
    //Der 5. Parameter ist die Höhe des höchsten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_pichei
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc");
    //Der 6. Parameter ist die Hintergrundfarbe der Slideshow. Sie ist von Bedeutung,
    // wenn Bilder nicht exakt den - in den beiden vorherigen Parametern angegebenen
    //Abmessungen entsprechen.
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_backgr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1);
    //Der 7. Parameter left fest, wie lange ein Bild zwischen zwei Wechseln
    // angezeigt wird (in Sekunden).
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_sdur
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1);
    //Der 8. Parameter ist die Zeit, die der Wechsel dauern soll
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_fdur
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20);
    //Der 9. Parameter ist 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.
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_steps
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n");
    //Der 10. Parameter legt die Starteinstellung fest.
    //Soll nach dem Laden automatisch gestartet werden? "y" für Ja, "n" für Nein
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_startwhen
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n");
    //Der 11. Parameter betrifft das Startbild.
    //Soll mit einem zufälligen Bild begonnen werden? "y" für Ja, "n" für Nein
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_shuffle
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y");
    //Der 12. Parameter entscheidet über die Anzeige von Kontrollelementen.
    //Sollen Kontrollelemente angezeigt werden? "y" für Ja, "n" für Nein
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_showcontr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //Der 13. Parameter ist der Parameter, den wir für das Array mit den Linkinhalten
    //der Kontrollelemente festgelegt haben, im Beispiel ist das buttons1.
    //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
    //Den Standardwert für diesen Parameter setzt im Sriptfile der Parameter: def_contr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //Nochmals der komplette Aufruf.
Im zweiten Schritt wird jetzt noch im BODY-Bereich der Seite an der gewünschten Stelle der 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 haben wir sie in diesem Beispiel bereits als Parameter gesetzt. 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.


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 (3)
ohne die Tasten
3 Freitag, den 25. November 2011 um 22:46 Uhr
Anja Kühl

Hallo,

danke für das verständiche Stript. Tatsache ich habe es verstanden und es geht :-) nun müsste ich nur diese Buttons da unten weg bekommen...sprich ohne Start und Stopp....

was muss ich ändern?

@Anja Kühl
Sonntag, den 27. November 2011 um 10:50 Uhr
A. Berger

Hallo Anja!

Ändern brauchst Du garnichts, es reicht, die Variable "def_showcontr" im Script "be_slide.js" von "y" auf "n" zu setzen.

Gruß
Andreas

Slideshow Beispiel 02
2 Sonntag, den 29. Mai 2011 um 11:21 Uhr
Helmut

Hallo Andreas,

Danke für deine gute Slideshow als Script. Dein Beispiel 01 habe ich auf unserer homepage eingebunden und es funktioniert hervorragend. Jezt wollt ich abe das Beispiel 02 mit einbinden und da ich in java noch nicht einmal ein Anfänger bin, meine Frage, da mir beim Aufruf von verschiedenen html-Seiten mit verschiedenen Bilddateien immer wieder die gleichen Bilder angezeigt werden (die von meinen Beispiel 01) aus dem be_slide.js script, was muss ich machen. Die var def_imges usw. sind doch Definitionen oder? Muss das alles in der be_slide.js gelöscht werden und dann auf der html-Seite wieder definiert werden?

Entschuldige bitte meine doofe Frage.
Gruß Helmut

@Helmut
Montag, den 30. Mai 2011 um 20:23 Uhr
A. Berger

Hallo Helmut!

Im Prinzip brauchst Du nur sklavisch das Beispiel abzuarbeiten. "Löschen" brauchst Du im Script nichts, aber die Definition der Slideshow "var be_0" im Script solltest Du auskommentieren, damit die entsprechende Definition aus dem Head der jeweiligen Seite verwendet wird. Auch das - wie im Beispiel beschrieben. :)

Gruß
Andreas

Ein Script für verschiedene Diashows mit verschiedenen Bildern?
1 Dienstag, den 24. Mai 2011 um 16:55 Uhr
Sabine

Hallo,

vielen Dank für das tolle Script! Es funktioniert für eine Diashow hervorragend. Ich werde es auf der Website, die ich gerade erstelle, auf jeden Fall verlinken.
Da ich aber js-Anfängerin bin, verstehe ich (trotz nachlesen und versuchen) nicht, wie ich das script umschreiben muss, wenn ich auf jeder Seite eine andere Diashow (mit einem anderen Satz an Bildern) einsetzen möchte. Kann ich dazu das gleiche Skript nehmen, oder muss ich jede Diashow mit einem eigenen Sript in einem eigenen Ordner anlegen?
Sorry, das ist evtl. eine doofe Frage, aber ich weiß mir nicht anders zu helfen, als doof zu fragen.

Viele Grüße
Sabine

@Sabine
Dienstag, den 24. Mai 2011 um 21:15 Uhr
A. Berger

Hallo Sabine!

Eiegntlich ist es nicht wirklich schwer, Du brauchst nur dem Beispiel auf dieser Seite zu folgen.

Es gliedert sich in 2 Abschnitte, den ersten Teil, der die HTML-Seite (be_slide.html) betrifft und den zweiten Teil, der das JavaScript (be_slide.js) betrifft.

Arbeitest Du das Script durch, dann hast Du 1 HTML-Seite und 1 Script-Datei.

Wiederholst Du jetzt den ersten Teil des Beispiels statt mit be_slide.html mit (angenommen) der HTML-Datei seite2.html, dann hast Du danach 2 HTML-Seiten (be_slide.html, seite2.html) und 1 Script-Datei (be_slide.js). Auf beiden HTML-Seiten kannst Du die Parameter der Slideshow völlig unterschiedlich konfigurieren und natürlich verschiedene Bilder verwenden.

Wiederhole den ersten Teil neuerlich mit seite3.html, seite4.html ..... usw.

Die Scriptdatei bleibt immer unverändert, alle relvanten Angaben erfolgen in der HTML-Datei.

Gruß
Andreas

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

bretteleben.de

Add to circles

Wer ist online
Wir haben 13 Gäste online