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


{jsfile}images/stories/be_slide.js{/jsfile}
(Das Plug-in 'includePHP-J1.5-1.1' für JavaScript habe ich vorher installiert und es funtioniert.)
Es wir nur das Bild pic01.jpg gezeigt. Was mache ich wohl falsch? oder gibt es eine ander Lösung?
Vielen Dank.
bebra
Für mich war wichtig, das ich nicht irgendwelche monströsen Frameworks mit einbinden muß.
Danke fürs Veröffentlichen !
As stated above:
[quote]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 http://www.bretteleben.de/lang-en/javascript/slideshow.html . 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.[/quote]
Please download the sample and use your settings with the JavaScript be_slide.js that comes with the sample. You just copied the above parameters, that's not enough because your file misses the real script.
Best regards
Andreas
The snippets on this page show how to configure the script you can download here: http://www.bretteleben.de/lang-en/javascript/slideshow.html but they are now the script.
Best regards
Andreas
Fein, dass das Script seinen Zweck erfüllt. Und danke für Deinen Hinweis! Bitte schreib es meiner Überheblichkeit zu, aber bei allen Überlegungen was schief gehen könnte bin ich auf die Idee, dass man als Anfänger (bitte nicht abwertend verstehen - Du bist meine "Zielgruppe" :) ) versuchen könnte, das Script ohne das Script zu benutzen, schlicht nicht gekommen.
Ich werde die Seiten dementsprechend anpassen.
Gruß
Andreas
das Problem liegt, wie es scheint, an meinem PC. Denn auf allen anderen PC's die ich jetzt zum Testen verwendet habe, läuft das script problemlos.
Vielleicht noch ein Tipp am Rande um deine Scripts auch für Anfänger verwendbar zu machen. Denn danach habe ich (ebenfalls Anfängerin in Sachen html und JAVAscript)auch etwas suchen müssen. Du schreibst nach den Parametern: "Das wars." Leider fehlt natürlich der wichtigste Teil. Nämlich die Funktionen etc. Mir war zwar klar das da irgendwo noch so etwas sein müsste, nur habe ich etwas Zeit benötigt bis ich das Demo.zip gefunden habe in dem der Rest steht.
Trotzdem, suuper Seite mit tollen scripten.
Gruß, Monika
Kein Problem, unter "Kontakt" (Menü ganz oben) findest Du auch meine Emnailadresse.
Gruß
Andreas
ich finde deine Scripte super, ganz besonders, dass du genau erklärst was wohin gehört und was damit gerade ausgeführt/eingestellt wird. Ich habe versucht dein Script in die Website meines Sohn einzubauen. Leider bekommen ich nur das statische Bild angezeigt, obwohl im IE Scripte erlaubt sind. Würdest du mal darüber schauen, und mir sagen was ich falsch gemacht habe? Die Website ist zur Zeit noch nicht online, ich könnte dir aber die gezippte Site per Mail schicken.
Vielen Dank im Voraus,
Monika