Startseite Javascript Slideshow - Slideshow Beispiel 01
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 Webseite

Der 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.
Andernfalls ist der Pfad entsprechend anzupassen.

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein 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 werden wir sie dann als Parameter setzen. 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" 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
 
Kommentare (58)
Slideshow funktioniert nicht mehr beim auskommentieren
58 Sonntag, den 08. Januar 2012 um 11:04 Uhr
Michael

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!

@Michael
Mittwoch, den 11. Januar 2012 um 13:01 Uhr
A. Berger

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

Script im Internet Explorer 8
57 Sonntag, den 08. Januar 2012 um 10:47 Uhr
Michael

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?

Script läuft nicht !
56 Dienstag, den 03. Januar 2012 um 17:25 Uhr
Peter

unter www.haustuerkauf.de/index_2011.html habe ich eine Testseite eingestellt. Mein Script läuft leider nicht kann jemand helfen ?

@Peter
Donnerstag, den 12. Januar 2012 um 11:03 Uhr
A. Berger

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

Danke vonn iPad User
55 Donnerstag, den 08. Dezember 2011 um 09:26 Uhr
Lia69

Vielen dank für das super Script. Endlich mal was unkompliziertes, was auch auf dem iPhone/iPad anzuschauen ist.

merci und danke
54 Freitag, den 02. Dezember 2011 um 20:01 Uhr
rene

vielen dank für das script. ich habe seit tagen nach einem passenden script gesucht und dein angebot trifft ins schwarze! danke. rene

Einfach und leicht einzubauen
53 Montag, den 07. November 2011 um 11:29 Uhr
gerry

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

slideshow
52 Montag, den 18. Juli 2011 um 12:20 Uhr
Fundi

es hat super geklappt, vielen dank für das tolle script :-)

Danke
51 Donnerstag, den 23. Juni 2011 um 11:50 Uhr
Max Mustermann

Das ist das mit Abstand BESTE SCRIPT, dass man bei Google-Suche finden kann.

Hat mir sehr geholfen. Dankeschön.

danke
50 Montag, den 23. Mai 2011 um 09:30 Uhr
hardy ess

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

nur graues feld
49 Sonntag, den 22. Mai 2011 um 20:42 Uhr
björn

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

@björn
Montag, den 23. Mai 2011 um 19:55 Uhr
A. Berger

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

Deutsch
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 36 Gäste online