multiple slideshow

[mindiapolis]

My client wants three sets of slideshow across the bottom of a webpage like this:

slideshow set 1 slideshow set 2 slideshow set 3



I have code for the first slideshow like this:

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=["pictures/Picture_001.jpg", "", ""];
variableslide[1]=["pictures/Picture_002.jpg", "", ""];
variableslide[2]=["pictures/Picture_003.jpg", "", ""];

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow
var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>

Now, I know nothing about javascript. I was told I need to change variable names, variable calls, functions and pointers. Could someone explain these terms and possibly give me a sample code to follow? If I could get some help, I would really appreciate it.

[ddadmin]

This is a very old script, and ripe for a complete rewrite. Until then though, you should look at Featured Content Slider. Just set the "toc" parameter when initializing the script to manual:

toc: "manual",

and within the Pagination DIV, leave it blank to basically make it look just like Flexi Image Slideshow (control less).

[mindiapolis]

I'm not getting this at all. Where do you put the pictures that go in the slideshow? I'm working on it on www.fountainchurch.org/test.html

[ddadmin]

Please read the instructions on the script page. Basically all the contents are defined inline on the page as regular HTML. In your case, they would mainly be regular <IMG> tags:

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="photo1.jpg" /><br />
Image 1 description.
</div>

<div class="contentdiv">
<a href="#"><img src="photo2.jpg" /></a>
</div>

<div class="contentdiv">
<img src="photo3.jpg" />
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

[mindiapolis]

What am I doing wrong? The slideshow still isn't apparing. Do the image tags go in the head or body?

[mindiapolis]

Do I need the paginate-slider1 div or the corresponding css?

[jscheuer1]

That could work, as could:

http://www.dynamicdrive.com/dynamici...army/index.htm

Which can accommodate various sized images in one or more slide shows on a page and can also be run without controls, text, etc. Maybe you will find it easier to understand. Either way, you will need to take the time to understand whatever script you want to use. Read over that (the one you choose) script's demo page thoroughly, several times if need be. Flexi cannot appear more than once on a page. You could put a second Flexi in an iframe, but a script that can do multiple shows on a page is a much better solution.

[mindiapolis]

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):

In this second line of this code would I put true if I want the slideshow to start automatically?

[jscheuer1]

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):

In this second line of this code would I put true if I want the slideshow to start automatically?

Apples and oranges. The slide show will start automatically unless you set its:

slides#.manual_start=1; //start show in manual mode (stopped)

property as was done on the demo page with the third example:

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications. 
slides3[0] = ["1_side.jpg", "", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slides3[1] = ["2_side.jpg", ""];
slides3[2] = ["3_side.jpg", "", "http://www.dynamicdrive.com"];
slides3[3] = ["5_side.jpg", "", "http://www.msn.com", "_new"];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=300, height=250' //global specifications for this show's new window(s)
slides3.random=1; //set a random slide sequence on each page load
slides3.manual_start=1; //start show in manual mode (stopped)

[mindiapolis]

I'm sorry, I really am trying but I still don't understand why the slideshows won't start automatically. /the website again is www.fountainchurch.org/test.html