Ultimate Fade-in slideshow

[jscheuer1]

First of all Bravo! on this great upgrade. This is not so much a script bug as a documentation bug, where it says on the demo page, for step two:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

It should be:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

Now, personally I'd prefer the term 'slide_interval' to 'pause' to describe that parameter, so as not to confuse it with a feature (much asked for) that this slideshow doesn't have, the ability to pause onmouseover. I've tried before to add that to it but, the code was too complex to allow for the usual method of doing so, now it is even more involved.

[ddadmin]

Thanks. Interestingly I noticed this error in the docs earlier today before reading this thread and corrected it.

[jscheuer1]

Great, big improvement (the entire script, I mean). Now we may stop getting so many requests to add all those things. I only noticed the omission so soon because someone was trying to get rid of the border and having a hard time of it. I have a question on the new version though. I haven't given up trying to add a pause. I had one attempt that was working pretty well on the old version. My question is this, where the new version has:

		var temp='setTimeout("fadearray['+obj.slideshowid+'].rotateimage()", '+obj.pause+')'
		eval(temp)

How is that better than:

	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.pause)

which seems to work as well and would make it a tad bit easier to add an onmouseover pause.

[jscheuer1]

I looked over this script a bit more and found that it was having problems on older browsers that, it seemed designed to work with. IE4 and 5 in particular. I also noticed that it didn't have code for browsers that support the simple:

style="opacity:10;"

Adding that caused some additional problems in ie4 and 5 but, I was able to fix that with more means testing.

NS4 used a different layout on the page than the others when there were more than one instance (inline as opposed to block), that was an easy change.

While I was at it, I found a way to eleiminate 'eval' from the script entirely. Tested on IE4, 5 and 6, FF1.0.7, NS4 and Opera8.51:

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
	fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
	fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages2[0]=["photo4.jpg", "", ""] //plain image syntax
	fadeimages2[1]=["photo5.jpg", "http://www.cssdrive.com", ""] //image with link syntax
	fadeimages2[2]=["photo6.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array()   //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var ie4=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, pause, displayorder){

	this.pause=pause
	this.degree=10 //initial opacity degree (10%)
	this.curimageindex=0
	this.nextimageindex=1
	fadearray[fadearray.length]=this
	this.slideshowid=fadearray.length-1
	this.canvasbase="canvas"+this.slideshowid
	this.curcanvas=this.canvasbase+"_0"
	if (typeof displayorder!="undefined")
		theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
	this.theimages=theimages
	this.imageborder=parseInt(borderwidth)
	this.postimages=new Array() //preload images
	for (p=0;p<theimages.length;p++){
		this.postimages[p]=new Image()
		this.postimages[p].src=theimages[p][0]
	}

	var fadewidth=fadewidth+this.imageborder*2
	var fadeheight=fadeheight+this.imageborder*2

	if ((ie4&&typeof document.documentElement!=='undefined')||dom)
		document.write('<div style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
	else
		document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

	if ((ie4&&typeof document.documentElement!=='undefined')||dom)
		this.startit()
	else{
		this.curimageindex++
		setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.pause)
	}
}

function fadepic(obj){
	if (obj.degree<100){
		obj.degree+=10
		if (obj.tempobj.filters&&obj.tempobj.filters[0])
			obj.tempobj.filters.alpha.opacity=obj.degree
		else if (obj.tempobj.style.MozOpacity)
			obj.tempobj.style.MozOpacity=obj.degree/101
		else if (obj.tempobj.style.KhtmlOpacity)
			obj.tempobj.style.KhtmlOpacity=obj.degree/100
		else if (obj.tempobj.style.opacity)
			obj.tempobj.style.opacity=obj.degree/101
	}
	else{
		clearInterval(fadeclear[obj.slideshowid])
		obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
		obj.tempobj=ie4? ie4[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
		obj.populateslide(obj.tempobj, obj.nextimageindex)
		obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.pause)
	}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
	var slideHTML=""
	if (this.theimages[picindex][1]!="") //if associated link exists for image
		slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
	slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
	if (this.theimages[picindex][1]!="") //if associated link exists for image
		slideHTML+='</a>'
	picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
	if ((ie4&&typeof document.documentElement!=='undefined')||dom){
		this.resetit()
		var crossobj=this.tempobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
		crossobj.style.zIndex++
		fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
		this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
	}
	else{
		var ns4imgobj=document.images['defaultslide'+this.slideshowid]
		ns4imgobj.src=this.postimages[this.curimageindex].src
	}
	this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
	this.degree=10
	var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
	if (crossobj.filters&&crossobj.filters[0])
		crossobj.filters.alpha.opacity=this.degree
	else if (crossobj.style.MozOpacity)
		crossobj.style.MozOpacity=this.degree/101
	else if (crossobj.style.KhtmlOpacity)
		crossobj.style.KhtmlOpacity=obj.degree/100
	else if (crossobj.style.opacity&&!crossobj.filters)
		crossobj.style.opacity=obj.degree/101
}

fadeshow.prototype.startit=function(){
	var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
	this.populateslide(crossobj, this.curimageindex)
	this.rotateimage()
}

</script>
</head>
<body>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

Neither version will work here in IE5.5

[ddadmin]

Hi:
Thanks for cleaning on some of my hasty code! eval() is evil, so if it can be avoided it's always good. I use it whenever I'm too lazy to try a more direct approach first- it's definitely a bad habit.

style="opacity:10;"

From what I understand this is actually a CSS 3 property that works in the least number of browsers right now (maybe in Mozilla). There's no harm in adding it in right now, but I guess it does add more weight to the code.

NS4 used a different layout on the page than...

Hmm neglected to test the script in NS4, but I see no reason not to throw in a DIV for formatting.

this slideshow doesn't have, the ability to pause onmouseover...

Off the top of my head I think it's going to take a little work, perhaps reorganize some of the code first. Once I get the chance I'll take a crack at it. With a pause feature part of the delima is when to pause the slideshow when the user moves the mouse as the slideshow is fading from one image to another, and both are partially visible. Do we continue to play the slideshow and pause when the image has faded in completely, or pause immediately regardless?

At the very least I think I'll incorporate some or most of your changes above. Just need to run a couple of browser tests. Thanks again!

[jscheuer1]

Off the top of my head I think it's going to take a little work, perhaps reorganize some of the code first. Once I get the chance I'll take a crack at it. With a pause feature part of the delima is when to pause the slideshow when the user moves the mouse as the slideshow is fading from one image to another, and both are partially visible. Do we continue to play the slideshow and pause when the image has faded in completely, or pause immediately regardless?

That has always been about the crux of my dilemma whenever I tried to pause the original version of this script. More precisely, for me, with so much going on, not only when/where to pause but also, how to pick up where I left off. I did have it working in IE6, I think. I'll go back, I still have those files.

Ideally, I would want it to pause to the next full image with backward and forward buttons appearing but, any workable method would be welcome for the many folks that have requested this feature in the past.

Just need to run a couple of browser tests

The only browser that I haven't been able to get either of the new versions to work in, either with or without fading is IE5.5. IE5.5 likes object.filters but, doesn't do object.filters.alpha.opacity=value. It will do:

object.style.filter='alpha(opacity=value)'

But, creating a test via means seems impossible. One thought that just struck me is possibly a try/catch setup. Another possibility is that if IE5.5 will handle it gracefully using the more verbose syntax of DMX transform, or whatever that is (escapes me, the precise syntax for that at the moment). I'm pretty sure IE6 will like that as well.

[jscheuer1]

OK, I now have the new version working in IE5.5 degrading well in earlier IE's and still working in IE6. I had to abandon the more modern:

object.filters.alpha.opacity=value

in favor of the archaic, but still supported:

object.style.filter='alpha(opacity='+value+')'

where 'value' is a variable containing the number value as a number or a string.

FF, Opera, NS4 are unaffected (still working) with this change:

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
	fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
	fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages2[0]=["photo4.jpg", "", ""] //plain image syntax
	fadeimages2[1]=["photo5.jpg", "http://www.cssdrive.com", ""] //image with link syntax
	fadeimages2[2]=["photo6.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadebgcolor="white"

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

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array()   //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var ie4=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, pause, displayorder){

	this.pause=pause
	this.degree=10 //initial opacity degree (10%)
	this.curimageindex=0
	this.nextimageindex=1
	fadearray[fadearray.length]=this
	this.slideshowid=fadearray.length-1
	this.canvasbase="canvas"+this.slideshowid
	this.curcanvas=this.canvasbase+"_0"
	if (typeof displayorder!="undefined")
		theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
	this.theimages=theimages
	this.imageborder=parseInt(borderwidth)
	this.postimages=new Array() //preload images
	for (p=0;p<theimages.length;p++){
		this.postimages[p]=new Image()
		this.postimages[p].src=theimages[p][0]
	}

	var fadewidth=fadewidth+this.imageborder*2
	var fadeheight=fadeheight+this.imageborder*2

	if ((ie4&&typeof document.documentElement!=='undefined')||dom)
		document.write('<div style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
	else
		document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

	if ((ie4&&typeof document.documentElement!=='undefined')||dom)
		this.startit()
	else{
		this.curimageindex++
		setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.pause)
	}
}

function fadepic(obj){
	if (obj.degree<100){
		obj.degree+=10
		if (obj.tempobj.filters&&obj.tempobj.filters[0])
			obj.tempobj.style.filter='alpha(opacity='+obj.degree+')'
		else if (obj.tempobj.style.MozOpacity)
			obj.tempobj.style.MozOpacity=obj.degree/101
		else if (obj.tempobj.style.KhtmlOpacity)
			obj.tempobj.style.KhtmlOpacity=obj.degree/100
		else if (obj.tempobj.style.opacity)
			obj.tempobj.style.opacity=obj.degree/101
	}
	else{
		clearInterval(fadeclear[obj.slideshowid])
		obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
		obj.tempobj=ie4? ie4[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
		obj.populateslide(obj.tempobj, obj.nextimageindex)
		obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.pause)
	}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
	var slideHTML=""
	if (this.theimages[picindex][1]!="") //if associated link exists for image
		slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
	slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
	if (this.theimages[picindex][1]!="") //if associated link exists for image
		slideHTML+='</a>'
	picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
	if ((ie4&&typeof document.documentElement!=='undefined')||dom){
		this.resetit()
		var crossobj=this.tempobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
		crossobj.style.zIndex++
		fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
		this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
	}
	else{
		var ns4imgobj=document.images['defaultslide'+this.slideshowid]
		ns4imgobj.src=this.postimages[this.curimageindex].src
	}
	this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
	this.degree=10
	var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
	if (crossobj.filters&&crossobj.filters[0])
		crossobj.style.filter='alpha(opacity='+this.degree+')'
	else if (crossobj.style.MozOpacity)
		crossobj.style.MozOpacity=this.degree/101
	else if (crossobj.style.KhtmlOpacity)
		crossobj.style.KhtmlOpacity=obj.degree/100
	else if (crossobj.style.opacity&&!crossobj.filters)
		crossobj.style.opacity=obj.degree/101
}

fadeshow.prototype.startit=function(){
	var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
	this.populateslide(crossobj, this.curimageindex)
	this.rotateimage()
}

</script>

[ddadmin]

Hi jscheuer1:
One concern I have with directly changing the filter string:

object.style.filter='alpha(opacity='+value+')'

is that it's a lot less efficient than going through the filter object step by step. I must admit I also wonder a little how many people need this script to work in IE5.5 and below heh.

Regarding the pause onmouseover feature, I took your first modified script above and added one in. I've hightlighted my changes in red. Everything looks fine, though I haven't thoroughly tested it yet:

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadebgcolor="white"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var ie4=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
 
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if ((ie4&&typeof document.documentElement!=='undefined')||dom)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if ((ie4&&typeof document.documentElement!=='undefined')||dom)
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
mouseover=false
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0])
obj.tempobj.filters.alpha.opacity=obj.degree
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=ie4? ie4[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if ((ie4&&typeof document.documentElement!=='undefined')||dom){
this.resetit()
var crossobj=this.tempobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0])
crossobj.filters.alpha.opacity=this.degree
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=obj.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
document.getElementById("master"+this.slideshowid).onmouseover=function(){cacheobj.mouseovercheck=1}
document.getElementById("master"+this.slideshowid).onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>
</head>
<body>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 0, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 1)
 
</script>

[ddadmin]

Just a quick explanation on the logic of my added code. I thought the best time to pause the slideshow once a person moves his mouse over the slideshow is after any fading effect has been completed. So if he moves the mouse over it while an image is being faded in, the script continues to play and only pauses after that fade effect has completed itself. Based on that, the code:

 
 
var cacheobj=this
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
document.getElementById("master"+this.slideshowid).onmouseover=function(){cacheobj.mouseovercheck=1}
document.getElementById("master"+this.slideshowid).onmouseout=function(){cacheobj.mouseovercheck=0}
}

binds the two relevant mouseover events to the sllideshow itself if the pause feature is enabled that merely toggles a variable to let the script know at all times whether the user's mouse is currently over the slideshow (mouseovercheck=1). Inside function rotateimage(), the addition:

var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if ((ie4&&typeof document.documentElement!=='undefined')||dom)

picks up on this, and if the user's mouse is currently over the slideshow, simply continue to run rotateimage() incessantly without doing anything until the mouse is out of it.

[jscheuer1]

One concern I have with directly changing the filter string

I was just thinking about that and have come up with:

function fadepic(obj){
	if (obj.degree<100){
		obj.degree+=10
		if (obj.tempobj.filters&&obj.tempobj.filters[0])
		try {
			obj.tempobj.filters.alpha.opacity=obj.degree
			}catch(e){
			obj.tempobj.style.filter='alpha(opacity='+obj.degree+')'
			}
		else if (obj.tempobj.style.MozOpacity)
			obj.tempobj.style.MozOpacity=obj.degree/101
		else if (obj.tempobj.style.KhtmlOpacity)
			obj.tempobj.style.KhtmlOpacity=obj.degree/100
		else if (obj.tempobj.style.opacity)
			obj.tempobj.style.opacity=obj.degree/101
	}
	else{
		clearInterval(fadeclear[obj.slideshowid])
		obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
		obj.tempobj=ie4? ie4[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
		obj.populateslide(obj.tempobj, obj.nextimageindex)
		obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
	setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.pause)
	}
}

and:

fadeshow.prototype.resetit=function(){
	this.degree=10
	var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
	if (crossobj.filters&&crossobj.filters[0])
	try {
		crossobj.filters.alpha.opacity=this.degree
		}catch(e){
		crossobj.style.filter='alpha(opacity='+this.degree+')'
		}
	else if (crossobj.style.MozOpacity)
		crossobj.style.MozOpacity=this.degree/101
	else if (crossobj.style.KhtmlOpacity)
		crossobj.style.KhtmlOpacity=obj.degree/100
	else if (crossobj.style.opacity&&!crossobj.filters)
		crossobj.style.opacity=obj.degree/101
}

To deal with just that concern and the fact that the older method may no longer be supported in IE7 or some future version. I'm not overly concerned with the backwards compatibility but, you know someone will be shocked if they get this thing going in IE5.5 and it wipes out on them. Perhaps this will even make it IE5 Mac compatible.

I will give your pause code a shot here and run it through its paces.

Added Later:
Oh, heck! try/catch messes up NS4 and IE4
There do seem to be ways around this though. It is odd how even though those browsers are already excluded from the code areas where try is used, they still choke on it. Using language versions in the script tag will screen NS4 and using if/endif screens can keep out IE4 but, that means breaking the code up a bit into separate script blocks.