Flexi slideshow - 2 on 1 page help.

[christyk]

1) Script Title: Flexi slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...flexislide.htm

3) Describe problem: Hi, I am trying to have 2 seperate flexi sideshow scripts on 1 page (with different images in both). When I try to paste the same code twice neither show up (I have got the first working great by itself). I'm sure it is something simple but my coding skills are not that great so if anyone could help that would be great

Thanks!

[thetestingsite]

Use the original code for the first slideshow, and try using the following for the second:

<script language="JavaScript1.2">

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

var variableslides=new Array()

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

variableslides[0]=['ball.gif', '', '']
variableslides[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslides[2]=['cake.gif', '', '']

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

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

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

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

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

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

var currentslides=0

function rotateImages(){
contentscontainer='<center>'
if (variableslides[currentslides][1]!="")
contentscontainer+='<a href="'+variableslides[currentslides][1]+'">'
contentscontainer+='<img src="'+variableslides[currentslides][0]+'" border="0" vspace="3">'
if (variableslides[currentslides][1]!="")
contentscontainer+='</a>'
contentscontainer+='</center>'
if (variableslides[currentslides][2]!="")
contentscontainer+=variableslides[currentslides][2]

if (document.layers){
crossrotateobjs.document.write(contentscontainer)
crossrotateobjs.document.close()
}
else if (ie||dom)
crossrotateobjs.innerHTML=contentscontainer
if (currentslides==variableslide.length-1) currentslides=0
else currentslides++
setTimeout("rotateIimages()",slidesdelay)
}

if (ie||dom)
document.write('<div id="slidesdom" style="width:'+slideswidth+';height:'+slidesheight+'; background-color:'+slidesbgcolor+'"></div>')

function startSlider(){
crossrotateobjs=dom? document.getElementById("slidesdom") : ie? document.all.slidesdom : document.slidensmains.document.slidenssubs
if (document.layers)
document.slidensmains.visibility="show"
rotateImages()
}

if (ie||dom)
startSlider()
else if (document.layers)
window.onload=startSlider

</script>

<ilayer id="slidensmains" width=&{slideswidth}; height=&{slidesheight}; bgColor=&{slidesbgcolor}; visibility=hide><layer id="slidenssubs" width=&{slideswidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

Not tested, but should work. Hope this helps.

Note: This is the exact same script, just with some changed variable and function names.

[repspecials]

Use the original code for the first slideshow, and try using the following for the second:

<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 variableslides=new Array()

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

variableslides[0]=['ball.gif', '', '']
variableslides[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslides[2]=['cake.gif', '', '']

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

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

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

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

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

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

var currentslides=0

function rotateImages(){
contentscontainer='<center>'
if (variableslides[currentslides][1]!="")
contentscontainer+='<a href="'+variableslides[currentslides][1]+'">'
contentscontainer+='<img src="'+variableslides[currentslides][0]+'" border="0" vspace="3">'
if (variableslides[currentslides][1]!="")
contentscontainer+='</a>'
contentscontainer+='</center>'
if (variableslides[currentslides][2]!="")
contentscontainer+=variableslides[currentslides][2]

if (document.layers){
crossrotateobjs.document.write(contentscontainer)
crossrotateobjs.document.close()
}
else if (ie||dom)
crossrotateobjs.innerHTML=contentscontainer
if (currentslides==variableslide.length-1) currentslides=0
else currentslides++
setTimeout("rotateIimages()",slidesdelay)
}

if (ie||dom)
document.write('<div id="slidesdom" style="width:'+slideswidth+';height:'+slidesheight+'; background-color:'+slidesbgcolor+'"></div>')

function startSlider(){
crossrotateobjs=dom? document.getElementById("slidesdom") : ie? document.all.slidesdom : document.slidensmains.document.slidenssubs
if (document.layers)
document.slidensmains.visibility="show"
rotateImages()
}

if (ie||dom)
startSlider()
else if (document.layers)
window.onload=startSlider

</script>

<ilayer id="slidensmains" width=&{slideswidth}; height=&{slidesheight}; bgColor=&{slidesbgcolor}; visibility=hide><layer id="slidenssubs" width=&{slideswidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

Not tested, but should work. Hope this helps.

Note: This is the exact same script, just with some changed variable and function names.

Guy's I have been racking my brains the last 4 hours with the same problem, I am by no means a programmer hence I am using this site for any java script needed but there was no other way to have multi flexi slideshow script on the same page without days of java script changes to make each individual script different to each other, so as to run at all.

I have devised a clever little cheat for this though, insert however many multiple inline frames within the host page (The page in which you require multiple script occurrances). Each inline frame then links to it's own page, with it's own name and you can paste the same flexi slideshow script into each subsequent linked page. I'm well chuffed with myself now and got myself out of this pain in the ar-so situation. I hope I've explained enough and hopefully save you guys hours of brain racking or code juggling.

Best of luck with your endeavors,
Ray

[jscheuer1]

Or, you could use:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

or:

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

Both of these allow multiple uses per page. In the case of Swiss Army (the second link), it can be configured to look just like Flexi.