| JavaScript: Slideshow Beispiel01 |
| Geschrieben von: Andreas Berger |
| Sonntag, den 01. März 2009 um 12:28 Uhr |
|
Das erste Beispiel zeigt die Standardkonfiguration des Scripts. Die Annahme: Auf 1 Seite soll 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 WebseiteDer 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. <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 ScriptdateiIm 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! |
| Zuletzt aktualisiert am Donnerstag, den 26. November 2009 um 18:49 Uhr |


Im korrespondierenden Joomla-Plugin habe ich das bereits eingebaut. Es auf das Original rückzuportieren steht noch an.
Gruß
Andreas
Frage: Gibt es auch die Möglichkeit, die einzelnen Bilder innerhalb der Slideshow anzuklicken und somit einen (für jedes Bild unterschiedlichen) externen oder internen Link zu öffnen?
Grüße,
Silvia
Either provide a link or (if testing offline) zip the page (with all additional files) and send it per mail. I will have a look at it.
Kind regards
Andreas
Per
gruss, michael.
One general tip: Use Firefox to debug pages, it comes with an excellent Error Console.
About your current problem: You may want to either provide a link to a test-page or zip it and send it per mail. I will have a look at it.
Kind regards
Andreas
Ich berechne nichts für das Script.
Es ist unter der GNU GPL, der GNU General Public License lizensiert und das bedeutet, dass an die Verwendung und die Weitergabe bestimmte Bedingungen geknüpft sind.
Welche, das kann in der Lizenz unter (www.gnu.org/copyleft/gpl.html) nachgelesen werden. Es finden sich dort auch (unauthorisierte) Übersetzungen.
Gruß
Andreas