Two Identical Scripts On One Header

[cas22]

I would like to somehow get both of these identical slideshow scripts working at the same time. Any help would be much appreciated"

<!-- dress -->
<div class= dress>
<div style="position:absolute; background-color:transparent; border-color: #000000; border:0px solid ; top: 443px; left: 346px; width:397px; height:255px;">
<script language="JavaScript1.2">
var variableslide=new Array()

//variableslide[x]=["", "", ""]

variableslide[0]=['dress/1.png', '', '']
variableslide[1]=['dress/2.png', '', '']
variableslide[2]=['dress/3.png', '', '']

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

var slidewidth='395px' //set to width of LARGEST image in your slideshow
var slideheight='255px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'

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

////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>
</div>
<!-- end dress -->

<!-- hair -->
<div class="hair">
<div style="position:absolute; background-color:transparent; border: 0px solid; border-color: #000000; left:436px; top:105px; width:227px; height:227px;">
<script language="JavaScript1.2">

var variableslide=new Array()

//variableslide[x]=["", "", ""]

variableslide[0]=['hair/1.png', '', '']
variableslide[1]=['hair/2.png', '', '']
variableslide[2]=['hair/3.png', '', '']

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

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

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

////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>

</div>
<!-- end hair -->

[Airshow]

Probelm is that the second instance overwrites the first because the same variable/function names are used.

You can fix it yourself by making all the variable/function names unique, though this is only a "band-aid" solution. The script you have found looks pretty outdated by today's javascript coding standards. For a start, it rewrites a section of document at every rotation rather than manipulating the DOM.

It would be much easier to find a more modern slider script that inherently handles multiple instances, for example a jQuery plugin (several are included here), with which you will define both sliders in about 10 lines of code. The underlying jQuery and jQuery UI libs will do the rest very effeciently.

jQuery takes a bit of getting used to but the API is very good and demos and tutorials abound. I will not try to add to them here.

Airshow