fadeshow with Chrome

[yvonneth]

Does anyone know why fadeshow.js does not work with google chrome?

[jscheuer1]

If you mean:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Works fine here in Google Chrome.

[yvonneth]

Oh - abject apologies - wrong forum!

[jscheuer1]

Well we can perhaps still help, where did you get the script?

[yvonneth]

Thanks jscheuer1! I've just checked - I was right originally - it did come from dynamicdrive.
The code follows - it was a while ago - maybe there is an update?

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © 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 bookimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
bookimages[0]=["images/closedbook.jpg", "", ""]
bookimages[1]=["images/illumbookcover.jpg", "", ""] 
bookimages[2]=["images/germancover.jpg", "", ""] 
bookimages[3]=["images/finecover.gif", "", ""] 
bookimages[4]=["images/finecover2.gif", "", ""] 
bookimages[5]=["images/finecover3.gif", "", ""] 
bookimages[6]=["images/finecover4.gif", "", ""] 
bookimages[7]=["images/finecover5.gif", "", ""] 
bookimages[8]=["images/finecover6.gif", "", ""] 
bookimages[9]=["images/finecover7.gif", "", ""] 
bookimages[10]=["images/finecover8.gif", "", ""] 
bookimages[11]=["images/finecover9.gif", "", ""] 
bookimages[12]=["images/finecover10.gif", "", ""] 

// do this again for another set - other params are link and target
var genealogyimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
genealogyimages[0]=["fadeshow_images/catherine.jpg", "", ""]
genealogyimages[1]=["fadeshow_images/jechamarette.jpg", "", ""] 
genealogyimages[2]=["fadeshow_images/sarahash.jpg", "", ""] 
genealogyimages[3]=["fadeshow_images/boytonfamily.jpg", "", ""] 
genealogyimages[4]=["fadeshow_images/gladysboyton.jpg", "", ""] 
genealogyimages[5]=["fadeshow_images/arthur.jpg", "", ""] 
genealogyimages[6]=["fadeshow_images/arthur+fallonfamily.jpg", "", ""] 
genealogyimages[7]=["fadeshow_images/berylchamarette.jpg", "", ""] 
genealogyimages[8]=["fadeshow_images/edward+blanche.jpg", "", ""] 
genealogyimages[9]=["fadeshow_images/lancaster+family.jpg", "", ""] 
genealogyimages[10]=["fadeshow_images/phyllis+robertchamarettewedding.jpg", "", ""] 
// do this again for another set - other params are link and target

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);-moz-opacity:10;-khtml-opacity:10;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);-moz-opacity:10;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{
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=obj.degree/100
}
 
 
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()
}

[jscheuer1]

Yes the current update is as I linked to originally:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

It is a major change from the version you have. There was an interim update (later christened v1.51):

http://www.dynamicdrive.com/forums/s...0026#post90026

But the latest version is now more robust, while at the same time, it can be made to look and act as the original. Both the current version and the interim update will work in Chrome.

[yvonneth]

Ah - excellent, I'll grab that.
Thanks a lot John.