Home Javascript Slideshow - Slideshow Sample 02
JavaScript: Slideshow Sample02
Written by Andreas Berger   
Sunday, 01 March 2009 12:30

The second sample uses the possibility to work with one scriptfile and multiple slideshows. The assumption: Within a website we have multiple webpages with one slideshow each.

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

As in sample 01 the first step is to integrate the script into the webpage, but this time we want to use one scriptfile with different slideshows. Therfor we have to link the script from the HEAD-section PLUS submit the settings we want to use for the slideshow on the page. First comes the script:

<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

Now we add the settings for the slideshow and call it:

<script src="be_slide.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>

So, what have we done:

<script type="text/javascript"><!--mce:2--></script>
    //But first we close our SCRIPT-Tag.
 

OK, now we analyze the line with the call of the slideshow-function:

var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
 
var be_0

The current instance of the slideshow is set as a variable called be_0. The name is obligatory. For 1 slideshow it´s always be_0.

be_slideshow()

be_slideshow() is the name of the function that creates and controls the slideshow. Within the brackets we may assign up to 13 parameter-values. Why "up to"?
Just because we have the possibility to set a DEFAULT-value within the scriptfile. If we do not assign a value within the call, the function tries to use the DEFAULT-value.
If we have multiple slideshows within a website, that vary only in the pictures used, we have the possiblity to put our settings into the scriptfile once (I suggest to do so anyway) and in the single page only set the array with the images and call the slideshow such as:

var be_0= new be_slideshow("0",pics1);

Notice: You don´t have to assign all parameters within the call, but you may not omit a parameter within the row and you have to follow the sort-order. If we want to assign a specific value to the third parameter, we have to assign values to the parameters one and two also. If we need a specific setting for parameter 13, the parameters 1-12 have to be assigned values too. Lets have a look at the parameters:

var be_0= new be_slideshow("0");
    //The 1. parameter is the number of the slideshow, starting with "0"
    //The Zero corresponds with the Zero in the name of the variable be_0
    //(We will deal with the question wy we need a number for just 1 slideshow
    // in sample 03.)
 
var be_0= new be_slideshow("0",pics1);
    //The 2. parameter is the name of the parameter, we set for the array with
    //the pictures - in this sample its pics1.
    //The default for this parameter is set in the scriptfile by the parameter: def_imges
 
var be_0= new be_slideshow("0",pics1,"slideshow");
    //The 3. parameter is the IDENTITY of the DIV-Container,
    //we will create to hold our slideshow.
    //The default for this parameter is set in the scriptfile by the parameter: def_divid
 
var be_0= new be_slideshow("0",pics1,"slideshow",400);
    //The 4. parameter is the width of the widest picture in pixel.
    //Notice: The script does not scale your pictures!
    //The default for this parameter is set in the scriptfile by the parameter: def_picwid
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300);
    //The 5. parameter is the height of the highest picture in pixel.
    //Notice: The script does not scale your pictures!
    //The default for this parameter is set in the scriptfile by the parameter: def_pichei
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc");
    //The 6. parameter id 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.
    //The default for this parameter is set in the scriptfile by the parameter: def_backgr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1);
    //The 7. parameter is the time, a picture is shown between
    //two transitions in seconds.
    //The default for this parameter is set in the scriptfile by the parameter: def_sdur
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1);
    //The 8. parameter is the time the transition should take
    //The default for this parameter is set in the scriptfile by the parameter: def_fdur
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20);
    //The 9. parameter is zhe number of steps to blend from 0-100.
    //A value between 1-100, the higher the value
    //the smoother the transition.
    //The default for this parameter is set in the scriptfile by the parameter: def_steps
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n");
    //The 10. parameter sets how to start:
    //Should the slideshow start automatically?
    //"y" for Yes, "n" for No
    //The default for this parameter is set in the scriptfile by the parameter: def_startwhen
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n");
    //The 11. parameter sets the start-picture.
    //Should we start with a random picture?
    //"y" for Yes, "n" for No
    //The default for this parameter is set in the scriptfile by the parameter: def_shuffle
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y");
    //The 12. parameter sets wheter to show controls or not.
    //"y" for Yes, "n" for No
    //The default for this parameter is set in the scriptfile by the parameter: def_showcontr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //The 13. parameter sets the contents of the control-links.
    //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
    //The default for this parameter is set in the scriptfile by the parameter: def_contr
 
var be_0= new be_slideshow("0",pics1,"slideshow",400,300,"#ccc",1,1,20,"n","n","y",buttons1);
    //Once again the complete call.

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 call above we have 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

In the downloaded JavaScript-file "be_slide.js" we now should set the DEFAULT-values (the are described in sample 01).
Essential - if we want to use the script-file with different slideshows - is to remove or better disable the DEFAULT-call of the function be_slideshow(). To do this we go to the last line in the scriptfile:

var be_0= new be_slideshow();

and add two slashes at the begin of the line, the start of a one-line comment:

//var be_0= new be_slideshow();

Having done this, the DEFAULT-call is disabled and the call in the HEAD-section of our webpage may do the job.

 


That´s it, have fun with the script.

Last Updated on Thursday, 26 November 2009 18:49
 
Comments (16)
ohne die Tasten
16 Friday, 25 November 2011 22:46
Anja Kühl

Hallo,

danke für das verständiche Stript. Tatsache ich habe es verstanden und es geht :-) nun müsste ich nur diese Buttons da unten weg bekommen...sprich ohne Start und Stopp....

was muss ich ändern?

@Anja Kühl
Sunday, 27 November 2011 10:50
A. Berger

Hallo Anja!

Ändern brauchst Du garnichts, es reicht, die Variable "def_showcontr" im Script "be_slide.js" von "y" auf "n" zu setzen.

Gruß
Andreas

Slideshow Beispiel 02
15 Sunday, 29 May 2011 11:21
Helmut

Hallo Andreas,

Danke für deine gute Slideshow als Script. Dein Beispiel 01 habe ich auf unserer homepage eingebunden und es funktioniert hervorragend. Jezt wollt ich abe das Beispiel 02 mit einbinden und da ich in java noch nicht einmal ein Anfänger bin, meine Frage, da mir beim Aufruf von verschiedenen html-Seiten mit verschiedenen Bilddateien immer wieder die gleichen Bilder angezeigt werden (die von meinen Beispiel 01) aus dem be_slide.js script, was muss ich machen. Die var def_imges usw. sind doch Definitionen oder? Muss das alles in der be_slide.js gelöscht werden und dann auf der html-Seite wieder definiert werden?

Entschuldige bitte meine doofe Frage.
Gruß Helmut

@Helmut
Monday, 30 May 2011 20:23
A. Berger

Hallo Helmut!

Im Prinzip brauchst Du nur sklavisch das Beispiel abzuarbeiten. "Löschen" brauchst Du im Script nichts, aber die Definition der Slideshow "var be_0" im Script solltest Du auskommentieren, damit die entsprechende Definition aus dem Head der jeweiligen Seite verwendet wird. Auch das - wie im Beispiel beschrieben. :)

Gruß
Andreas

Ein Script für verschiedene Diashows mit verschiedenen Bildern?
14 Tuesday, 24 May 2011 16:55
Sabine

Hallo,

vielen Dank für das tolle Script! Es funktioniert für eine Diashow hervorragend. Ich werde es auf der Website, die ich gerade erstelle, auf jeden Fall verlinken.
Da ich aber js-Anfängerin bin, verstehe ich (trotz nachlesen und versuchen) nicht, wie ich das script umschreiben muss, wenn ich auf jeder Seite eine andere Diashow (mit einem anderen Satz an Bildern) einsetzen möchte. Kann ich dazu das gleiche Skript nehmen, oder muss ich jede Diashow mit einem eigenen Sript in einem eigenen Ordner anlegen?
Sorry, das ist evtl. eine doofe Frage, aber ich weiß mir nicht anders zu helfen, als doof zu fragen.

Viele Grüße
Sabine

@Sabine
Tuesday, 24 May 2011 21:15
A. Berger

Hallo Sabine!

Eiegntlich ist es nicht wirklich schwer, Du brauchst nur dem Beispiel auf dieser Seite zu folgen.

Es gliedert sich in 2 Abschnitte, den ersten Teil, der die HTML-Seite (be_slide.html) betrifft und den zweiten Teil, der das JavaScript (be_slide.js) betrifft.

Arbeitest Du das Script durch, dann hast Du 1 HTML-Seite und 1 Script-Datei.

Wiederholst Du jetzt den ersten Teil des Beispiels statt mit be_slide.html mit (angenommen) der HTML-Datei seite2.html, dann hast Du danach 2 HTML-Seiten (be_slide.html, seite2.html) und 1 Script-Datei (be_slide.js). Auf beiden HTML-Seiten kannst Du die Parameter der Slideshow völlig unterschiedlich konfigurieren und natürlich verschiedene Bilder verwenden.

Wiederhole den ersten Teil neuerlich mit seite3.html, seite4.html ..... usw.

Die Scriptdatei bleibt immer unverändert, alle relvanten Angaben erfolgen in der HTML-Datei.

Gruß
Andreas

Probleme mit dem IE
13 Thursday, 24 February 2011 22:31
Wolfgang

Hallo Andreas,

kannst du dir mal meine Testseite http://moremustangs.com/index%20-%20Kopie.htm ansehen? Da erscheinen beim Bild ohne javascript zusätzliche Zeilen unter den Bildern und mit javascript wird das Bild nicht richtig zentriert. Bei Firefox, Safari, Opera oder Chrome funktioniert alles einwandfrei. Gibt es eine Lösung?

Viele Grüße
Wolfgang

info AT moremustangs DOT com


 


 

Problem mit IE behoben
Thursday, 03 March 2011 12:30
Wolfgang

Hallo Andreas,

Eine Änderung in der DOCTYPE Zeile hat geholfen. Die Slideshow lässt sich jetzt mit "margin:auto" zentrieren.
Danke für deine Hinweise und das coole script.

Wolfgang

@Wolfgang
Sunday, 27 February 2011 20:28
A. Berger

Hallo Wolfgang!

Die zusätzlichen Zeilen beim ersten Bild kommen vielleicht von dem Zeilenumbruch, den Du mit in den DIV-Container gepackt hast. Und das Problem mit der Zetrierung im Internet Explorer rührt von der Verwendung des CENTER-Tags. Der ist seit HTML4 depricated und sollte nicht mehr verwendet werden. Geneerell hat die Slideshow im Internet Explorer ein Problem, wenn sie zentriert wird, ein Abstand nach links ist einfacher zu bedienen.

Gruß
Andreas

Darstellung im IE und Firefox
12 Saturday, 05 February 2011 10:26
Kirsten

Hallo Andreas!

Problem war, crossbrowser für IE und Firefox die gleiche Darstellung ihinzubekommen. IE schnuddelte mir immer einen Versatz von einem Pixel rein, dadurch bekam ich einen Versprung beim Navigieren und zwischen den Tabellenspalten.
Man stelle sich vor: eine weiße Seite, dann eine Tabellenspalte farbig (mit Navigation), in der zweiten ein Bild, exakte Höhe wie die Spalte daneben.
Sobald mit Script belegt, "sprang" das Bild im IE um ein Pixel nach unten, d.h, oben war plötzlich das Bild zu kurz.

Lösung:
Ich gab im Javascript der  Variablen, die die höchste Höhe übergibt, ein Pixel mehr und sicherte die Bilder auch mit einem Pixel höher ab, ohne jedoch in der Tabellenzelle die Höhe zu verstellen.
also: var def_pichei= x+1
Bild: ebenfalls x+1
aber img src=bild.jpg height=x beim Bildeinfügen in die Tabellenzelle
Vielleicht kannst Du meine Anmerkung ja gebrauchen - lang genug hats ja bei mir gedauert, bis ichs raushatte..

Schöne Grüße
Kirsten

@Kirsten
Saturday, 05 February 2011 23:59
A. Berger

Hallo Kirsten!

Ich weiss, das Template auf bretteleben.de verwendet Tabellen und wer im Glashaus sitzt, der sollte nicht mit Steinen werfen. Trotzdem, wenn ich Probleme mit einem Script und einer Tabelle habe, dann versuche ich immer erst, die Tabelle loszuwerden und nur wenn das nicht geht, passe ich das Script an. :)

Gruß
Andreas

Problem behoben ; war: Bild springt mir aus der Tabellenzelle
11 Thursday, 03 February 2011 11:58
Kirsten

Im IE sprang mir das Bild beim Laden des Scriptes aus der Zelle, sobald ich es innerhalb der Zelle rechts anordnen wollte! (Die linke Begrenzung des Bildes war dann  an dem rechten Ende  der Tabelle, also das rechte Ende Ende des Bildes lag außerhalb der Tabelle ... Ähmja ;-)
Problem behoben habe ich, indem ich eine weitere Tabellenzelle links hinzugefügt habe, mittels der ich das Bild einfach dorthin "geschoben" habe, wohin ich es wollte, ohne innerhalb der Zelle eine Ausrichtung anzugeben. Testungen des Scriptes haben mir nämlich ergeben, daß sich die Ausrichtung für die Tabellenzelle  bei dem gesetzten div-Tag auf die Linke Seite des Inhaltsbildes bezieht ;-)
So hat das Bild innerhalb der Tabellenzelle einen horizontalen Offset von:

align="left" : 0, weil sich die Linke Bildkante an die Linke Ausrichting hält
align="center" : Linke Bildseite ist zentriert, also 0 + Bildbreite nach rechts
align="right" :  Rechte  Bildseite ist rechts + Bildbreite nach rechts (und damit bei mir aus dem Layout geschossen -)
Danke, daß ich mich hier sortieren durfte :-D

Beste Grüße von der IE-Pixelschubserfront ;-)
die Kirsten

@Kirsten
Thursday, 03 February 2011 20:17
A. Berger

Hallo Kirsten!

Fein, dass das Problem behoben ist. Ja, Tabellen als Layout und Alignments sind im Internet Explorer manchmal mühsam.
Was das Veröffentlichen von Kommentaren angeht - da ich für das verantwortlich bin was hier passiert, mache ich das manuell, deshalb kann es ein wenig dauern, bis ein Kommentar zu sehen ist.
Was das "sich Sortieren" angeht - jederzeit gerne :)

Gruß
Andreas

Seltsames div - Problem
10 Thursday, 03 February 2011 09:32
Kirsten Scholl

Hallo,

erstmal herzlichen Dank für das klasse script! Wunderbar und fantastisch anzupassen
Allerdings hab ich ein seltsames Problem damit, das Script für mehrere Seiten zu adaptieren (vorab:im Firefox ist alles gut, nur der IE macht mir den Stress..)
Ich band das original script unter dem Namen start_sl.js in die Startseite ein, der div-container ist in einer Tabellenzelle.
Danach erstellte ich eine weitere Seite. Ich speicherte das script unter anderm Namen, gesch_sl.js ab, mit anderen Bildgrößen, anderen Bildern. Der div-container ist nun wieder in einer Tabellenzelle plaziert.
Ausrichtung der Zelle ist rechts. Firefox akzeptiert die Tabellengrenzen. IE nicht!! Das Bild steht sobald das Script beginnt, mit seiner linken Außenkante am rechten inneren Rand der Tabellenzelle!!!!
Ihr Lieben, kann mir jemand helfen, den IE in seine Schranken zu weisen? Ich wühl mich durch, bin bedingt Javascript-fähig, und dennoch : no-ideas ;-)

Herzlichts - von der IE-Legasthenikerfront ;-)
die Kirsten

Controls platzieren, in die Slideshow ?
9 Friday, 21 January 2011 09:38
Werner

Liebe Ersteller,

das ist ja mal eine runde Sache :-) Zunächst vielen Dank!
Gibt es eine Möglichkeit, die Controls innerhalb der Slidshow zu platzieren?

Vielen Dank für Ihre Antwort und viele Grüße
Werner

@Werner
Saturday, 22 January 2011 22:19
A. Berger

Hallo Werner!

Ja, die gibt es. Öffnen Sie das Stylesheet /plugins/content/plugin_besps/besps.css und ändern Sie den - vorhandenen aber leeren - Selektor .besps_ctrls

von: .besps_ctrls {}
zu: .besps_ctrls {position:relative;padding-top:250px;z-index:3;}

... wobei Sie den Abstand von der oberen Kante, den Wert "250" entsprechend dem anpassen, was für Ihre Slideshow passend ist.

Gruß
Andreas

danke für´s script
8 Tuesday, 11 January 2011 22:47
RxCloud

erstmal danke für die arbeit.

aber eine frage hab ich da noch,
is es möglich auch .php in die slideshow einzubinden ?

@RxCluod
Wednesday, 12 January 2011 18:16
A. Berger

Hallo RxCloud!

Nein, das Script funktioniert nur mit Bilddateien.

Gruß
Andreas

Super!! :-)
7 Tuesday, 26 October 2010 10:32
Beatrix Andel

Hallo Andreas,


vielen Dank für das tolle Script!!! :-)

Ich wollte ein SWF auf meiner Seite vermeiden, und das JavaScript von Dir ist sehr schnell angepasst und läuft auch noch flüssiger!
Außer im Header/Quelltext habe Dich auf meiner Seite in der Fußzeile (mit Copyrighthinweis und Link) und im Impressum erwähnt.
Das i-Tüpfelchen wäre, wenn man jedes Bild noch mit einem externen Link versehen könnte. Aber da die Bilder ja nur in einem Array hintereinander abgerufen bzw. heruntergezählt werden, geht das vermutlich nicht, oder? Denn wenn er gestoppt wird, weiß er da, welches Bild gerade oben liegt?

Ich habe deshalb auf die controls verzichtet und biete die Links separat an: http://www.andel-grafikdesign.de/webdesign.html

Danke und liebe Grüße Beatrix

PS: Finde ich klasse, dass Du Dir soviel Zeit nimmst, auf die Kommentare auch noch zu antworten!

Danke!
Wednesday, 27 October 2010 12:46
Beatrix Andel

Hi Andreas,

danke für das Kompliment bzg. meiner Seite! :-)

Ich finde übrigens Deine Seite auch ganz toll -  nee im Ernst, ist jetzt keine Schleimerei!
Bis jetzt die einzige, die ich gefunden habe, die so übersichtlich und leicht lesbar ist und auch noch alle Scripts so "idiotensicher" erklärt und dokumentiert.
Man merkt, dass da ganz viel HIRN und HERZ drin steckt!
:-)
Ich wünsche Dir weiterhin viele gute Einfälle und werde immer wieder hier hereinschauen...

Lieben Gruß
Bea

@Beatrix
Tuesday, 26 October 2010 14:39
A. Berger

Hallo Beatrix!

Danke schön für den Link auf Deiner Seite!

Was die Links angeht - das ist eine oft gewünschte Funktion und scheitert einfach an der Zeit es einzubauen - womit wir bei den Kommentaren sind. :)
Das Ganze hier ist ein Freizeitprojekt und von der Zeit, die ich auf die Webseite verwenden kann, geht rund zwei Drittel in den Support der Scripts/Erweiterungen und nur ein Drittel in neue Versionen. Da bleibt so manches Feature auf der Strecke.

Ausnehmend schöne Seite übrigens!

Gruß
Andreas

English
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 38 guests online