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 (19)
Alle Bilder im ordner pics
19 Mittwoch, den 02. Mai 2012 um 14:42 Uhr
Champn

Hi,

danke für das tolle Script!
geht es auch, dass ale Bilder im Ordner "pics" verwendet werden?, sodass man seine Bilder nur in den "pics"-Ordner schiebt?

Wäre toll wenns geht und du auch schreiben würdest wie es geht!

@Champn
Mittwoch, den 02. Mai 2012 um 21:09 Uhr
A. Berger

Hallo Champn!

Ja ich weiß wie das geht und ja ich könnte das für Dich coden, aber nein, ich werde es nicht tun, denn ich kann auch Deutsch und weiß, dass man "doof" in 99% der Fälle mit "bequem" übersetzen kann. :p

Also, wirf Google an, such nach "PHP Verzeichnis auslesen", lies Dich ein, probier ein wenig herum und wenn Du an dem Punkt bist, wo Du meinst, dass eigentlich alles passen sollte und es nur mehr an einer Kleinigkeit hängen kann, dann - und wirklich erst dann - schick mir eine Email mit dem Code und ich helfe Dir gerne weiter.
Glaub' mir, etwas dazuzulernen tut nicht weh und das Erfolgserlebnis wenn es klappt ist die Sache durchaus wert.

Gruß
Andreas

Danke für die schnelle Antwort
Mittwoch, den 02. Mai 2012 um 20:51 Uhr
Champn

Weisst du, wie das geht und könntest das für mich coden? Ich bin dafür nämlich zu doof :)
Wäre echt toll!

@Champn
Mittwoch, den 02. Mai 2012 um 20:29 Uhr
A. Berger

Hallo Champn!

Mit dem Script alleine nicht wirklich. JavaScript läuft client-seitig, also auf dem Rechner des Benutzers und hat dort aus Sicherheitsgründen nur wenig Möglichkeiten auf das Dateisystem zuzugreifen. Auf das am Server ohnehin nicht - da ist es einfach Text. Es ist also nicht möglich, mit JavaScript ein Verzeichnis am Server auszulesen. Aber natürlich kannst Du Dir mit einer server-seitigen Sprache wie z.B. PHP eine Schleife bauen, die das Verzeichnis ausliest und die Dateinamen in das JavaScript-Array schiebt bevor dieses vom Browser ausgelesen wird.

Gruß
Andreas


 

Stop nach letztem Bild?
18 Mittwoch, den 18. April 2012 um 16:50 Uhr
Frank S.

Hallo Andeas.

Danke für das großartige Script. Läuft überall hervorragend und kann super angepasst werden. Somit sehr vielseitig. Viele offene Fragen konnten dank der Kommentare hier auch schon gelöst werden. Beispielhaft wie hier der Support bei einem Freizeitprojekt funktioniert.
Eine Frage habe ich (wegen noch mangelnder js. Kenntnisse) aber auch. Wurde ganz am Anfang schon behandelt, habe leider keine Antwort gefunden.
Kann man die Slideshow nach dem letzten Bild anhalten?
Bei entsprechender Einstellung könnte beim Seitenaufruf dann die Show mit Bild 1 starten und beim letzten enden. (So mein Wunsch....)

vielen Dank für die Mühe und nochmals Danke.

Danke
Mittwoch, den 09. Mai 2012 um 16:11 Uhr
Frank S

Hallo Andreas,

nochmals vielen Dank für Deine sehr schnelle Antwort!
Hat sofort funktioniert. Konnte alles nach Wunsch umsetzen. Hat mir sehr geholfen.

Viele Grüße Frank

@Frank S.
Mittwoch, den 18. April 2012 um 21:04 Uhr
A. Berger

Hallo Frank!

Um das Script nach dem letzten Bild zu stoppen, öffne das JavaScript be_slide.js mit einem Texteditor.

In Zeile 149 ersetze:
emax

durch:
emax-1

In Zeile 160 ersetze:
startim=1;

durch:
startim=startim+1;

und nach Zeile 161 füge das als neue Zeile ein:
stopit=1;

Das war's schon.

Gruß
Andreas

Super Script
17 Mittwoch, den 11. April 2012 um 12:46 Uhr
Daniel

Vielen Dank für das super Script.

Was muss man ändern, um die Bilder ohne Rahmen zu sehen?

Gruss Daniel

@Daniel
Mittwoch, den 11. April 2012 um 19:59 Uhr
A. Berger

Hallo Daniel!

Das Script erzeugt keine Rahmen. Kann es vielleicht am Stylesheet Deiner Seite liegen?

Gruß
Andreas

Super Script
16 Freitag, den 06. April 2012 um 23:21 Uhr
Ralf R.

Das nenne ich mal ein super schlankes Skript mit optimaler Funktion. Danke fürs freistellen. Es findet auf unserer Website an mehr als 470 Stellen (vierhundertsiebzig) Verwendung. Wir sind ein Fußballverein der Niederrhein Liga und nutzen das Skript für die Berichte zu den Spieltagen aller Mannschaften und für die Darstellung der Sponsorenwerbung. Der erste Einbau dauerte sage und schreibe 15 Minuten. Das habe ich mit keinem anderen Skript geschafft.

Vielen Dank für das script
15 Montag, den 06. Februar 2012 um 18:07 Uhr
Rudi

Die slideshows sind das absolute highlite unserer ansonsten sehr einfachen Seite.
Als Anfänger bin ich gut mit der tollen Erklärung klar gekommen!

www.zappelkiste.de

Slideshow funktioniert nicht mehr beim auskommentieren
14 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
13 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 !
12 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
11 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
10 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

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

bretteleben.de

Add to circles

Wer ist online
Wir haben 23 Gäste online