Startseite Javascript Slideshow - Slideshow Beispiel 01
2010-09-09
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)
@Silvia
10 Samstag, den 09. Mai 2009 um 08:08 Uhr
A. Berger
Hallo Silvia!

Im korrespondierenden Joomla-Plugin habe ich das bereits eingebaut. Es auf das Original rückzuportieren steht noch an.

Gruß
Andreas
Slideshow+Bilder "verlinken"
9 Donnerstag, den 07. Mai 2009 um 10:32 Uhr
Silvia
Hallo Andreas, ich habe gerade dieses Script entdeckt und finde es superklasse. Vor allem auch für Unerfahrene (so wie mich) einigermaßen zu "durchschauen".
Frage: Gibt es auch die Möglichkeit, die einzelnen Bilder innerhalb der Slideshow anzuklicken und somit einen (für jedes Bild unterschiedlichen) externen oder internen Link zu öffnen?

Grüße,
Silvia
@Per
8 Sonntag, den 03. Mai 2009 um 13:14 Uhr
A. Berger
Hi Per!

Either provide a link or (if testing offline) zip the page (with all additional files) and send it per mail. I will have a look at it.

Kind regards
Andreas
Example 1
7 Sonntag, den 03. Mai 2009 um 12:10 Uhr
Per
Hi Andreas! Thanks for a great script. I have followed your detailed describtion, but unfortenately it does not work. I can only see the file defined in the html file. Any suggestions?

Per
slideshow
6 Freitag, den 01. Mai 2009 um 22:09 Uhr
michael
wow, vielen dank. die slideshow war wirklich einfach in die webseite einzubauen. alles gut kommentiert. ich waere auch darin interessiert, einen text mit dem jeweiligen bild anzuzeigen - mit dem selben file namen, nur mit der endung .txt. ist wahrscheinlich nicht zu schwierig, nur zeitaufwendig zu programmieren. ich werde auf jeden fall oefters mal deine webseite wieder anschauen.
gruss, michael.
@Finn
5 Dienstag, den 21. April 2009 um 20:01 Uhr
A. Berger
Hi Finn!

One general tip: Use Firefox to debug pages, it comes with an excellent Error Console.

About your current problem: You may want to either provide a link to a test-page or zip it and send it per mail. I will have a look at it.

Kind regards
Andreas
hmmm...
4 Dienstag, den 21. April 2009 um 17:12 Uhr
Finn
it's not working for me - any thoughts? General troubleshooting? I can't seem to get the javascript to display on the html site. I only get my first image. Ant help?
good job
3 Montag, den 16. März 2009 um 12:56 Uhr
trco
good job, easy to understanding, bravoo
@nurbeate
2 Sonntag, den 15. März 2009 um 17:11 Uhr
A. Berger
Hallo nurbeate!

Ich berechne nichts für das Script.
Es ist unter der GNU GPL, der GNU General Public License lizensiert und das bedeutet, dass an die Verwendung und die Weitergabe bestimmte Bedingungen geknüpft sind.
Welche, das kann in der Lizenz unter (www.gnu.org/copyleft/gpl.html) nachgelesen werden. Es finden sich dort auch (unauthorisierte) Übersetzungen.

Gruß
Andreas
Slideshow
1 Sonntag, den 15. März 2009 um 16:25 Uhr
nurbeate
sind die Script´s auch kostenlos, wenn man sie für eine Gewerblich HP einsetzt?