Ultimate Fade-In Slideshow (v1.51)

**Celelen** · 10-25-2012, 07:26 AM

1) Script Title:
Ultimate Fade-In Slideshow

3) Problem

Hi folks!
I have been using the ultimate fade-in Slideshow v1.51 for my page (and have been very pleased with myself that I made it work, despite my little knowledge of java). The slideshow looks wonderful with Chrome, but with IE9 the slides "hang up" and turn white if the user moves the mouse. I have looked into the newer version of the slideshow, but since it is so much different in the code, I just can't make it work. :-(

Is there a way to modify the code so that it is no longer so sensitive to mouse moving?

Cheers!

2) Script URL (on DD):

Code:

<HEAD>
<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © 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]=["PublishedFiles/Herbstgarten.jpg", "", ""] //plain image syntax
fadeimages[1]=["PublishedFiles/lingon pan1.jpg", "", ""] //plain image syntax
fadeimages[2]=["PublishedFiles/Elch.jpg", "", ""] //plain image syntax

fadeimages[3]=["PublishedFiles/blaubeer.jpg", "", ""] //plain image syntax
fadeimages[4]=["PublishedFiles/blabar2.jpg", "", ""] //plain image syntax
fadeimages[5]=["PublishedFiles/Eicheln.jpg", "", ""] //plain image syntax

fadeimages[6]=["PublishedFiles/stadt.jpg", "", ""] //plain image syntax
fadeimages[7]=["PublishedFiles/apfel1.jpg", "", ""] //plain image syntax
fadeimages[8]=["PublishedFiles/schnecke.jpg", "", ""] //plain image 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]=["PublishedFiles/lingon pan2.jpg", "", ""] //plain image syntax
fadeimages2[1]=["PublishedFiles/Herbstmorgen.jpg", "", ""] //plain image syntax

fadeimages2[2]=["PublishedFiles/lingon2.jpg", "", ""] //plain image syntax
fadeimages2[3]=["PublishedFiles/lingon.jpg", "", ""] //plain image syntax

fadeimages2[4]=["PublishedFiles/apfel2.jpg", "", ""] //plain image syntax
fadeimages2[5]=["PublishedFiles/lingon see.jpg", "", ""] //plain image 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 iebrowser=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 (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
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:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
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.filters)
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=iebrowser? iebrowser[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(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[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=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
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=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

</HEAD>

<body>






<table border="0" cellpadding="0" cellspacing="0" width="540">

<tr>
<td>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 270, 370, 0, 4500, 0 )
</script>
</td>
<td>

<script type="text/javascript">
new fadeshow(fadeimages2, 270, 370, 0, 6000, 0)
</script>
</td>
</tr>
</table>

 



</body>

3) Describe problem:

**Celelen** · 10-25-2012, 08:30 AM

By the way - this is where I found it in the first place:
http://www.northsea-cycle.com/
and they have also not updated their version, try it out in IE9 and compare with chrome! Thanks!

**jscheuer1** · 10-25-2012, 11:45 AM

See the code posted here:

http://www.dynamicdrive.com/forums/s...743#post268743

**Celelen** · 10-25-2012, 12:56 PM

Great - thank! You have no idea how happy I am now. If you have time and feel for it, could you please try to explain the difference between the 1.51 version and the 2.4 version, since they seem nowhere similar?!
Should I consider in the future to try and make the 2.4 work?

Cheers!

**jscheuer1** · 10-27-2012, 05:54 AM

It's more like the differences (plural). I'm not sure I can list them all off of the top of my head:

Feature	1.51	2.4
Captions	No	Optional, several types
Controls	No	Optional
Uses jQuery	No	Yes
Available Mods	Yes, scattered about the forum	Yes, same but with at least one formal blog entry (Extra Buttons)
Callbacks*	No	Optional
External	No	Most of it, yes
Status	No	Optional, `Image # of #`

*Callbacks are configurable functions that allow the script to more easily execute other actions at certain times.

All I can think of at the moment. I may come back later and add to it. If you want more details on any of these check out the demo and supplement pages for the most recent version and/or ask here.