Problem with Ultimate Fade Script and IE8

[matt-c]

1) Script Title: Ultimate Fade v1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Im trying to set up a page with 3 images slideshows on which fade into each other but they need to stagger so that they dont all fade at the same time, which is why i've used v1.5 rather than the newer v2.

It works fine apart from on IE8 where sometimes it loses the sequence and they start fading too soon or at the same time.

Also if you right click anywhere on the page it "pauses" the script and also messes up the sequence. It's as if the timing is still running but no fading is occurring, until you click off the right click menu, and then it will continue to fade but not in the correct sequence.

Thanks for your help.

Matt

[matt-c]

Javascript used:

var stagger=0 


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, bgpic){
this.pausecheck=pause
this.mouseovercheck=0
this.delayf=delay
this.delay=delay/2
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")
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
this.postimages=new Array() //preload images
if (iebrowser&&dom||dom) { //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="imgDiv'+this.slideshowid+'"  style="display:none;">')
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
document.write('<img src="'+this.theimages[i_tem][0]+'">\n')
document.write('</div>')

for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img')[p].src
}
document.write('<div style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px; background:url(/Portals/0/images/homepage/' +bgpic+') no-repeat bottom right;">\n')
document.write('<span id=LB0'+this.slideshowid+' style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;left:-50px;top:-18px"></span>\n')
document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;"><span id=LB1'+this.slideshowid+' style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;"></span></span></span>\n')
document.write('<div id="show'+this.slideshowid+'" style="visibility:hidden;">\n')
}

else
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
var filtering=typeof document.body.style.opacity!=='string'? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-khtml-opacity:10;-moz-opacity:10;' : ''
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;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div><img id="temp'+this.slideshowid+'" style="position:relative;z-index:1000;" src="'+this.theimages[0][0]+'"><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;'+filtering+'opacity:10;background-color:'+fadebgcolor+'"></div></div></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.images_loading_bar()
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) //time between each loop of the images - aprox 15 secs
obj.delay=obj.delayf
}
}
 
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()
}

fadeshow.prototype.images_loading_bar=function(){
var m00=document.getElementById('imgDiv'+this.slideshowid).getElementsByTagName('img');
var m01=m00.length;
var m02=0;
for(var i=0;i<m01;i++)
m02+=(m00[i].complete)?1:0;
document.getElementById('LB1'+this.slideshowid).style.width=Math.round(m02/m01*100)+'px';
if(m02==m01){this.readyFlag=1;setTimeout("document.getElementById('LB0"+this.slideshowid+"').style.display='none';document.getElementById('show"+this.slideshowid+"').style.visibility='visible';if(["+this.slideshowid+"+1]==fadearray.length)startAll()",300);}
else setTimeout("fadearray["+this.slideshowid+"].images_loading_bar()", 64);
}

function startAll(){
var ready=0
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
ready+=fadearray[i_tem].readyFlag? 1 : 0;
if (ready==fadearray.length)
for (i_tem = 0; i_tem < fadearray.length; i_tem++){
if (stagger){
setTimeout("fadearray["+i_tem+"].startit()", stagger*i_tem)
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000+stagger*i_tem)
}
else {
fadearray[i_tem].startit()
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000)
}
}
else
setTimeout("startAll()",300)
}

[matt-c]

in the html:

<tr>
            <td><script type="text/javascript"> 
var stagger=9000
new fadeshow(fadeimages3, 218, 127, 0, 4000, 0, 1, "3children-StMary.jpg") </script></td>
            <td width="3%"> </td>
            <td><script type="text/javascript"> 
var stagger=3000 
new fadeshow(fadeimages2, 218, 127, 0, 4000, 0, 2, "consultants-meeting.jpg") </script></td>
            <td width="3%"> </td>
            <td><script type="text/javascript"> 
var stagger=1500
new fadeshow(fadeimages, 218, 127, 0, 4000, 0, 3, "gansu-project.jpg") </script></td>
        </tr>
        <tr>

[ddadmin]

Hmm I'm not too clear what you're trying to do as far as "stagger" the 3 slideshows. In v2.0 of the script both the fade duration and pause between image changes can be customized for each instance of the slideshow, just like in the older version.

[matt-c]

By stagger i mean i want image 1 to start then after a bit image 2 to start, then 3, i.e. sequentially. And then i want this to carry on so the images dont change at the same time. I couldnt work out how to do this with v2 and then i came accross v1.5 which has a stagger var.

The problem seems to still be there with v2 anyway. If you look on the v2 page: http://www.dynamicdrive.com/dynamici...nslideshow.htm
and right click (wait a few secs then click off menu) in IE8 the images will 'pause' and then continue once you click off the right click menu, but now the images change in tandom rather than sequentially.

I hope that clarifys the problem..

thanks

[matt-c]

Ok testing V2 again and it seems the right click doesnt effect it as bad, the timings seem to go back to normal.

However how do i achieve a stagger effect? I need 3 images changing at the same rate but starting at different times...

Thanks

[ddadmin]

Ok if I understood correctly, you want to be able to add a different initial pause to each slideshow instance on the page, so the first slideshow starts rotating say 2 seconds after the page has loaded, the 2nd 5 seconds etc. If so, try using the modified .js file attached below. Then to specify a custom delay before a particular slideshow starts, inside its initialization code, define the "stagger" option:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	stagger: 4000,
	togglerid: "fadeshow2toggler"
})

The above will cause the slideshow to start rotating 4 seconds after the page has loaded.

[matt-c]

Excellent! Thanks for your help.

However im still getting the same problem in IE8, where by if you right click it will stop the images changing (whilst the right click menu is up) and if you leave it long enough the stagger is lost and the images start changing at the same time again.

Thanks

Matt

[ddadmin]

You can try disabling the feature of pausing the slideshow when the mouse hovers over it. Inside the .js file, find the following line:

setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover

and change true above to false.

[matt-c]

i've already got that commented out