Startseite Javascript Slideshow - Slideshow Beispiel 01
2010-09-07
Hauptmenü
externe Links
Meist gelesen
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

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 (80)
Klasse Tool
50 Mittwoch, den 04. November 2009 um 21:14 Uhr
0l2i
Ich wollte nur kurz ein Kompliment darlassen für das klasse Tool. Echt einfach zu integrieren und wirkt einfach schick. Die Buttons ans eigene Layout noch anpassen und perfekt :-)

Vielen Dank
@Erik
49 Donnerstag, den 01. Oktober 2009 um 20:08 Uhr
A. Berger
Hi Erik!

The client side JavaScript does not know anything about the server side PHP, it not even knows that the page it resides in is not a static page so - a conflict is rather unlikely. A lot more probable is a mistake/misconfiguration. If you could provide a link to the page I will have a look at it.

Best regards
Andreas
php integration
48 Donnerstag, den 01. Oktober 2009 um 00:12 Uhr
Erik
Hello all! I have been trying to integrate this lovely script into a simple php site for quite some time now and it won't work. Basically I have made a php version of an old html site where the slideshow DID work, and have taken the code and inserted it into the of the php file containing the tag. This works for other java scripts but not for this one. Maybe there is some sort of conflict? It also occurs to me that the buttons are not visible even though I put "y" where told. All help is much appreciated.
Ratschlag war gut
47 Sonntag, den 13. September 2009 um 21:52 Uhr
Ninos
lol, weis ned wieso, aber hat super geholfen, danke :)
@Ninos
46 Sonntag, den 13. September 2009 um 16:28 Uhr
A. Berger
Hallo Ninos!

Hast Du schon mal in Erwägung gezogen, dass es an den Änderungen liegen könnte, die Du am Script vorgenommen hast? Falls nicht, es wäre vielleicht einen Versuch wert, das Script im Original zu verwenden und zu sehen, was passiert.

Gruß
Andreas
selbes Problem
45 Sonntag, den 13. September 2009 um 15:56 Uhr
Ninos
sry, es hier zuzuspamen, aber ich hab da var def_backgr="#c0c0c0"; angegeben, sogar deins versucht, immer noch selbes Problem :(
Kann es sein, dass es an was anderem liegt?
@Ninos
44 Sonntag, den 13. September 2009 um 15:02 Uhr
A. Berger
Hallo Ninos!

Das passiert, wenn man keine Hintergrundfarbe (var def_backgr="#eeeeee";) gesetzt hat :)

Gruß
Andreas
Link zur Seite
43 Sonntag, den 13. September 2009 um 14:21 Uhr
Ninos
Hallo Andreas,
der Link zur Seite lautet filary.de
Da müsstest du vielleicht bisschen warten, bis mal ein Bild kommt, welches breiter oder höher ist, als das andere :)
Dann solltest du erkennen, was ich meinte :)

Danke schonmals,
Ninos
@Caroline
42 Sonntag, den 13. September 2009 um 10:10 Uhr
A. Berger
Hallo Caroline!

Um herauszufinden, ob die Slideshow funktioniert - müssten Sie sie verwenden :)

Auf der Seite Slideshow (im Menü links) kann man das Script herunterladen (bretteleben.de.slideshow.20090406.zip). Das Archiv enthält ein voll funktionsfähiges Beispiel. Unter anderem enthält es die Datei be_slide.js. Das ist das Script. Es beginnt mit dem Copyright, dann folgen die Parameter, dann das eigentliche Script. Sie haben auf Ihrer Seite lediglich den Block mit den Parametern eingebaut, das ist ein bisschen zu wenig.
Verwenden Sie das ganze Script - und die Sache wird besser laufen. Der Iframe ist übrigens nicht nötig.

Gruß
Andreas
Schade - Slideshow funktioniert nicht
41 Sonntag, den 13. September 2009 um 09:48 Uhr
Caroline
Ich glaube, ich habe alles richtig gemacht und verlinkt, aber die Diashow funktioniert nicht (Aussteller)

http://www.gv-fehraltorf.ch/expo_8320/

Wäre der inline-Frame überhaupt nötig oder kann ich den DIV-Container direkt in die Tabellenzelle setzen?

Es wäre schade, wenn ich es nicht zum Laufen bekäme; besonders der Start mit Zufallsbild ist mir wichtig.

Danke für die Hilfe
Caroline