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)
JavaScript-Slideshow im Joomla 1.5?
60 Montag, den 01. Februar 2010 um 15:07 Uhr
bebra
ich haber versucht, die SlideShow in einen Joomla-Beitrag einzubauen mit:

{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
Großartig !
59 Freitag, den 29. Januar 2010 um 14:23 Uhr
Wolfgang
Sehr schön einfach und klein das Skript.

Für mich war wichtig, das ich nicht irgendwelche monströsen Frameworks mit einbinden muß.

Danke fürs Veröffentlichen !
@Brad in Oregon
58 Dienstag, den 29. Dezember 2009 um 10:08 Uhr
A. Berger
Hi Brad!

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
Confused
57 Dienstag, den 29. Dezember 2009 um 01:07 Uhr
Brad in Oregon
First image appears, but slideshow never loads. Can you tell me what mistake I am making? Thank you! http://oregontrailhoa.com/be_slide_Test-1.html
@Wolf
56 Donnerstag, den 26. November 2009 um 19:41 Uhr
A. Berger
Hi Wolf!

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
Frustrating
55 Donnerstag, den 26. November 2009 um 09:46 Uhr
Wolf
I cut & pasted the 'Slideshow Sample 0' code as shown into a blank html page and a blank js page as described. I then saved each into the same location and tested. The page stays on my first image. I have plenty of other js dependant links in other pages that work fine so I know it is not a browser issue. The code as shown just doesn't work.
@Monika
54 Dienstag, den 24. November 2009 um 21:40 Uhr
A. Berger
Hallo Monika!

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
Re: Slideshow startet nicht
53 Dienstag, den 24. November 2009 um 14:46 Uhr
Monika
Halo 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
@Monika
52 Montag, den 23. November 2009 um 20:23 Uhr
A. Berger
Hallo Monika!

Kein Problem, unter "Kontakt" (Menü ganz oben) findest Du auch meine Emnailadresse.

Gruß
Andreas
Slideshow startet nicht
51 Montag, den 23. November 2009 um 14:22 Uhr
Monika
Hallo 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