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

Hi,
wenn die Zeile mit dem Vorwärts- Rückwärt - Button auskommentieren, dann funktioniert die Slideshow nicht mehr; kannst du mir da einen Tipp geben?
Übrigens das erste Problem, habe ich herausbekommen; es lag an der Breite bzw. Höhe die im Script definiert war
hatte da 100 x 100 definiert; wass der Firefox bzw. Opera komplett ingnoriert hat!
Hallo Michael!
Ja, kann ich: Lass das Auskommentieren bleiben. Wenn Du keine Kontrollelemente haben möchtest, dann setz einfach den Parameter
var def_showcontr="n";
Damit startet die Slideshow automatisch und es werden keine Buttons angezeigt.
Gruß
Andreas
Erstmal ein großes Lob für das Script; funktioniert einwandfrei;
was ich aber festegestellt habe, dass wenn ich das Script bzw. meine HTML-Seite im Internet Explorer 8 aufrufe, dass beim Wechsel der Bilder immer in der linken oberen Ecke eine quadratische Kachel vom vorherigen Bild beim Wechsel zum folgenden Bild erscheint?
Ist das ein Bug? ............ oder liegt das einfach am IE 8 - der Internet Explorer scheint mir im Vergleich zu anderen Browsern irgendwie ein Eigenleben zu führen, was ich hinsichtlich CSS auch schon festgestellt habe.
Kann man dieses Phänomen irgendiwie beheben?
unter www.haustuerkauf.de/index_2011.html habe ich eine Testseite eingestellt. Mein Script läuft leider nicht kann jemand helfen ?
Hallo Peter!
Das Problem ist der onload-Event, den Du im BODY-Tag platziert hast. Dieser JavaScript-Event wird abgefeuert, wenn die Seite fertig geladen hat. Das ist ein gleichermaßen fest definierter (Seite fertig) und flexibler (egal wie lange es gedauert hat, sie zu laden) Event - und wichtig für viele JavaScripts. Der Haken, es gibt den Event nur 1 mal und wenn mehrere ihn benutzen wollen, dann müssen sie "teilen".
Meine Slideshow benutzt den Event um zu einem Zeitpunkt zu starten, wenn alle Elemente des DOM (Document Object Model), also die Baumstruktur aus Elementen aus denen eine Seite besteht, komplett zur Verfügung stehen und - die Aktivitäten des Scripts den Besucher nicht insofern beeinträchtigen, als sie das Laden der Seite verzögern.
Nun gibt es verschiedene Ansätze, diesen Event zu benutzen. Verschieden in technischer und moralischer Hinsicht. Interessant in diesem Fall sind die "moralischen" Aspekte.
Die Slideshow benutzt den Event, indem sie ihm die erforderlichen Aufrufe hinzufügt ohne andere Scripts zu beeinträchtigen.
Der Aufruf in Deinem BODY-Tag hingegen hat einen geringfügig anderen Ansatz: "Hinter mir die Sintflut!". Was auch immer dem Event bereits an Funktionen zugeordnet wurde, der Aufruf überschreibt es gnadenlos und killt damit andere Scripts.
Meine Empfehlung wäre, das von Dir derzeit verwendete Script entweder umzubauen oder austauschen oder aber eine Slideshow einzusetzen, die diesen Event nicht braucht.
Gruß
Andreas
Vielen dank für das super Script. Endlich mal was unkompliziertes, was auch auf dem iPhone/iPad anzuschauen ist.
vielen dank für das script. ich habe seit tagen nach einem passenden script gesucht und dein angebot trifft ins schwarze! danke. rene
Vielen Dank an den Entwickler für dieses einfache und leicht zu bedienende Skript!
Meist hat man ja nicht die Zeit sich stundenlang zu spielen, wenn man sich genau an die Anleitung hält ist dieses Skript in 5 Minuten funktionsfähig eingebaut!!
Schöne Grüße
es hat super geklappt, vielen dank für das tolle script :-)
Das ist das mit Abstand BESTE SCRIPT, dass man bei Google-Suche finden kann.
Hat mir sehr geholfen. Dankeschön.
hallo
danke fürs script. hab als absolut blutiger java-script-laie zwar ziemlich herumgetan, aber jetzt scheints zu klappen - super.
www.hiddenmuseum.net/fukushima.html
ciao
hardy
hallo
habe das script so angelegt wie beschrieben. hab aber keine slideshow sondern nur ein graues feld.
hilfe wäre super. siehe unter bjoernkwapp.de
danke
Hallo björn!
Entweder sind die Bilder nicht dort, wo sie sein sollten oder die Verzeichnisrechte sind nicht korrekt gesetzt (Ordner 755, Bilder 644). Das Script sucht die Bilder im Ordner /pics, aber unter http://bjoernkwapp.de/pics/pic03.jpg wird schon das auf der Seite statisch eingebundene Bild nicht gefunden, geschweige denn die anderen im Array angegebenen Bilder.
Gruß
Andreas