Home Javascript Slideshow - Slideshow Sample 01
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
JavaScript: Slideshow Sample01
Written by Andreas Berger   
Sunday, 01 March 2009 12:28

The first sample shows the standard configuration of the script. The starting basis: 1 page with 1 slideshow.

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 JavaScript: slideshow. 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.


be_slide.html - the webpage

The first step is to integrate the script into the webpage. To achieve this, it is linked from the HEAD-section of the page:

<script type="text/javascript" src="be_slide.js"></script>

The sample assumes, that the script is located in the same directory as the webpage, otherwise the path has to be adjusted.

The second step is to create a DIV-container in the BODY-section of your page, located where you want the slideshow to be displayed. Of importance is the IDENTITY of this DIV-container - in this sample it´s "slideshow" (id="slideshow"). It can be chosen, within the script we will set it as value of a parameter. The DIV-container can be positioned and styled as you want. This sample inserts on of the pictures - uploaded to a subfolder called "pics" - statically into the DIV-container to provide a fallback for visitors without JavaScript.
For visitors with JavaScript enabled this is of no importance, because the script replaces the content of the DIV-container with the slideshow.

<div id="slideshow" style="margin:25px;">
  <img src="pics/pic01a.jpg" style="width:400px;height:300px;" />
</div>

That´s it for the webpage.


be_slide.js - the scriptfile

Now we set the parameters in the scriptfile be_slide.js to fit our needs. The sample above uses the following values:

 

//*****parameters to set*****
 
var def_imges=new Array ('pics/pic01a.jpg', 'pics/pic01b.jpg', 'pics/pic01c.jpg');
    //In this array, set the pictures you want the slideshow to display.
 
var def_divid="slideshow";
    //The IDENTITY of the DIV-Containers,
    //we created to hold the slideshow
 
var def_picwid=400;
    //The width of the widest picture in pixel.
    //Notice: The script does not scale your pictures!
 
var def_pichei=300;
    //The height of the highest picture in pixel.
    //Notice: The script does not scale your pictures!
 
var def_backgr="#eeeeee";
    //The background-color of the slideshow. It is of importance
    //if you have pictures in your set, that do not fit the values
    //set above for width and height.
 
var def_sdur=3;
    //The time, a picture is shown between two transitions in seconds.
 
var def_fdur=1;
    //The time the transition should take
 
var def_steps=20;
    //The number of steps to blend from 0-100.
    //A value between 1-100, the higher the value
    // the smoother the transition.
 
var def_startwhen="y";
    //Should the slideshow start automatically?
    //"y" for Yes, "n" for No
 
var def_shuffle="y";
    //Should we start with a random picture?
    //"y" for Yes, "n" for No
 
var def_showcontr="y";
    //Should we show control-elements?
    //"y" for Yes, "n" for No
 
var def_contr=new Array('bwd.png','start.png','stop.png','fwd.png');
    //if you show control elements, you may choose between textlinks
    //and buttons. Into this array therefor insert either the text
    //you want to be displayed or the path to the image you want to
    //be used. If the script finds either .jpg or .gif or .png as the
    //ending of your input, it will display the image automatically.
    //The sort order of the elements displayed and therefor within this
    //array is: BACK - START - STOP - FWD
 
//****************************************************************
 

 


That´s it, have fun with the script!

Last Updated on Thursday, 26 November 2009 18:49
 
Comments (19)
Alle Bilder im ordner pics
19 Wednesday, 02 May 2012 14:42
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
Wednesday, 02 May 2012 21:09
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
Wednesday, 02 May 2012 20:51
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
Wednesday, 02 May 2012 20:29
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 Wednesday, 18 April 2012 16:50
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
Wednesday, 09 May 2012 16:11
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.
Wednesday, 18 April 2012 21:04
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 Wednesday, 11 April 2012 12:46
Daniel

Vielen Dank für das super Script.

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

Gruss Daniel

@Daniel
Wednesday, 11 April 2012 19:59
A. Berger

Hallo Daniel!

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

Gruß
Andreas

Super Script
16 Friday, 06 April 2012 23:21
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 Monday, 06 February 2012 18:07
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 Sunday, 08 January 2012 11:04
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
Wednesday, 11 January 2012 13:01
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 Sunday, 08 January 2012 10:47
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 Tuesday, 03 January 2012 17:25
Peter

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

@Peter
Thursday, 12 January 2012 11:03
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 Thursday, 08 December 2011 09:26
Lia69

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

merci und danke
10 Friday, 02 December 2011 20:01
rene

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

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 109 guests online