Multiple slideshow

**jamie smith** · 03-25-2005, 06:42 PM

Hello

I have found a DD script for a fading slideshow which I love because it works in all browsers. What I want to do is have 2 slideshows on the same page but I cant seem to get it to work.

Any help would be greatly appreciated.

Thanks

**jamie smith** · 03-25-2005, 06:43 PM

Ooops forgot the script:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in image slideshow script- ?Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

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

**Hannes** · 03-25-2005, 07:24 PM

Jamie,

if you want to use the same script twice on the same site then you will have to make both of them unique, i. e. substitute the variable names of one of them.

Look here:
http://www.dynamicdrive.com/help.htm#1

**jamie smith** · 03-25-2005, 07:32 PM

Hi thanks for the reply this should help, ill start looking at it now.

Thanks again

**jamie smith** · 03-26-2005, 05:06 PM

Hello

Ive read the tutorial but I am still having problems. I copied the script and change the variable names of one but to no avail plus the script becomes really messy. Does anybody know of a simpler way of having this script appear twice on the same page?

Ive just put up a test page which is using a different script but shows what i am trying to achieve:

www.amalgam-models.co.uk/james/front.htm

Thanks

**jscheuer1** · 03-26-2005, 06:07 PM

Hannes is right but, you also may need to have each function name unique and definitely each id name used unique across the two scripts. In fact any part of one script that could conflict with the other has to be unique in each. Usually though I prefer a modified script to carry out both tasks, this may or may not be possible/better in this case. Some further guidance is available by following the link in this note:
Note: Questions regarding multiple script usage are not usually replied to due to their time consuming nature. See this thread for more information, and this tutorial for one possible solution.
Yes it is alot of work but, others have triumphed.

**jamie smith** · 03-26-2005, 07:35 PM

Thanks for the advice this should be very useful.

Thanks again

Thread: Multiple slideshow

Thread Tools

Search Thread

Multiple slideshow

Script

thanks

Bookmarks

Bookmarks

Posting Permissions