Home Javascript Slideshow - Slideshow Sample 03
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 Sample03
Written by Andreas Berger   
Sunday, 01 March 2009 12:31

The third sample extends the samples one and two by the possibility to show multiple (in this sample 2) slideshows on one webpage.

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 again to integrate the script into the webpage. As shown in sample 02 we are going to adress one scriptfile with multiple slideshows, but this time they are within 1 page. Again we have to link the script and insert our settings in the HEAD-section of 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>

The single steps:

<script type="text/javascript"><!--mce:2--></script>
    //The last line closes the SCRIPT-Tag.
 

In the BODY-section of the page we this time create - I bet you never thought of that - two DIV-containers to hold the slideshows. Again, essential is their IDENTITY, in this case we above used "slideshow1" (id="slideshow1") and "slideshow2" (id="slideshow2"). Style and position the containers as you want. Again, we use static images as fallback for visitor without JavaScript.

 

<div id="slideshow1" style="margin:25px;">
  <img src="pics/pic01a.jpg" border="0" style="width: 400px; height: 300px;" /></div>
 
<div id="slideshow2" style="margin:25px;">
  <img src="pics/pic02a.jpg" border="0" 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 calls in the HEAD-section of our webpage may do their job.

 


That´s it, have fun with the script.

Last Updated on Thursday, 26 November 2009 18:49
 
Comments (1)
Bilderspezifische Zeitwechseleinstellung
1 Thursday, 24 November 2011 15:58
Olaf B

Ich möchte gerne das das Startbild, länger angezeigt wird, als die anderen Bilder. Kann man das realisieren?

@Olaf B
Thursday, 24 November 2011 22:41
A. Berger

Hallo Olaf!

Realisieren kann man das natürlich, man müsste das Script halt entsprechend umbauen.
Wenn die Slideshow automatisch durchläuft (also ohne Buttons), dann kannst Du aber auch einfach das Startbild 2x in den Array einfügen, das hat den selben Effekt.

Gruß
Andreas

English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 155 guests online