Log in

View Full Version : Flexi-slideshow question


jmayle
12-13-2005, 04:42 AM
I need help with something, i'm trying to put 2 flexi-slideshows on the same page ,ive done everything, every tutorial, has said to do such as putting the onload in the body tag...changing the variable and function names.. maybe im doing something wrong,, perhaps one of you can let me know, this problem has been very humbling...the first pic shows up but not the 2nd here's the code, the 1st flexi script has been changed.... from the vars to the function names...the 2nd is straight from http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

to make it easy on you, i changed names by adding an 01 after the function names and variables, instead of completly renaming them...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<body onload="start_slider1();start_slider2()">

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

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

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

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

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

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

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

var eio=document.all
var doom=document.getElementById

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

var currentslide01=0

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

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (eio||doom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide01==variableslide01.length-1) currentslide01=0
else currentslide01++
setTimeout("rotateimages01()",slidedelay01)
}

if (eio||doom)
document.write('<div id="slidedom" style="width:'+slidewidth01+';height:'+slideheight01+'; background-color:'+slidebgcolor01+'"></div>')

function start_slider1(){
crossrotateobj=doom? document.getElementById("slidedom") : eio? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages01()
}

if (eio||doom) start_slider1()
else if (document.layers)


</script>

<ilayer id="slidensmain" width=&{slidewidth01}; height=&{slideheight01}; bgColor=&{slidebgcolor01}; visibility=hide><layer id="slidenssub" width=&{slidewidth01}; 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>








<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]=['ball.gif', '', '']
variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslide[2]=['cake.gif', '', '']

//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_slider2(){
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_slider2()
else if (document.layers)


</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; 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>
</body>
</html>
jscheuer1
12-13-2005, 05:29 AM
Nice effort! You missed a few variables and an id, maybe two. You also misunderstood what was going on with the original onload events, and as a result did not translate them properly to the body tag. I cannot vouch for it in NS4 but, in all modern browsers that supported the original, it will work. Ugly looking, but works. I may work on this more later, to make it pretty.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2 Flexi Slideshows</title>
</head>

<body onload="if (document.layers){start_slider1();start_slider2()}">

<script type="text/javascript">

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

var variableslide01=new Array()

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

variableslide01[0]=['photo1.jpg', '', '']
variableslide01[1]=['photo2.jpg', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslide01[2]=['photo3.jpg', '', '']

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

var slidewidth01='140px' //set to width of LARGEST image in your slideshow
var slideheight01='275px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor01='#F3F3F3'

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

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


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

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

var currentslide01=0

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

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide01==variableslide01.length-1) currentslide01=0
else currentslide01++
setTimeout("rotateimages01()",slidedelay01)
}

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

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

if (ie||dom)
start_slider1()

</script>

<ilayer id="slidensmain" width=&{slidewidth01}; height=&{slideheight01}; bgColor=&{slidebgcolor01}; visibility=hide><layer id="slidenssub" width=&{slidewidth01}; 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>


<script type="text/javascript">

/***********************************************
* 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]=['photo4.jpg', '', '']
variableslide[1]=['photo5.jpg', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslide[2]=['photo6.jpg', '', '']

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

var slidewidth='140px' //set to width of LARGEST image in your slideshow
var slideheight='275px' //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////////////////

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

var currentslide=0

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

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

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

function start_slider2(){
crossrotateobj2=dom? document.getElementById("slidedom2") : ie? document.all.slidedom2 : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider2()


</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; 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>
</body>
</html>
jmayle
12-13-2005, 05:55 AM
geezzzz....thanks, it worked....ima' doofus, thanks agine