PDA

View Full Version : Small bug in Ultimate Fade-in slideshow (v1.5)



david@sickmiller.com
02-24-2006, 09:25 PM
I noticed a small bug in Ultimate Fade-in slideshow (v1.5) on Internet Explorer 6.0. Essentially, if your image array consists of only one image, it will trigger a javascript error. I can't remember the exact text, but it comes from the populateslide function. My guess is that displaying only one image was never planned or tested. (There are reasons to have an array of one image, such as having a database-driven dynamic page that displays one or more images.)

I didn't fully review the code, but I was able to stop the javascript error by changing one line in the fadeshow() function from:

this.nextimageindex=1;
to:

this.nextimageindex=(theimages.length>1)?1:0;

Twey
02-24-2006, 10:18 PM
I think the author didn't bother about this because he/she didn't think anyone would be daft enough to have a one-image slideshow. :)

jscheuer1
02-25-2006, 02:06 PM
I'm still waiting for KhtmlOpacity and MozOpacity to be replaced or augmented with generic opacity. Seems (from feedback in these forums on at least two occasions) some (if not all) versions of Safari require this.

Twey
02-25-2006, 02:51 PM
(There are reasons to have an array of one image, such as having a database-driven dynamic page that displays one or more images.)In which case you should check server-side whether a slideshow will be required or not, to avoid wasting precious browser resources.

david@sickmiller.com
02-26-2006, 06:24 PM
In which case you should check server-side whether a slideshow will be required or not, to avoid wasting precious browser resources.

Even if there is only one image to display, it is nice to have it fade in.

jscheuer1
03-10-2006, 10:13 PM
I'm still waiting for KhtmlOpacity and MozOpacity to be replaced or augmented with generic opacity. Seems (from feedback in these forums on at least two occasions) some (if not all) versions of Safari require this.

As the evidence continues to come in (see this thread (http://www.dynamicdrive.com/forums/showthread.php?p=29301#post29301)), I continue to wait. :rolleyes:

ddadmin
03-11-2006, 02:00 PM
As the evidence continues to come in (see this thread (http://www.dynamicdrive.com/forums/showthread.php?p=29301#post29301)), I continue to wait. :rolleyes:

Ahhh so many things to get to! Hehe ok I promise the next time I get to updating this script, I'll look at incorporating the changes with the opacity issue. Thanks for keeping that flame lit behind my behind. :D

jscheuer1
03-12-2006, 02:57 AM
No need to worry, I've updated the script. I also found a typo as regards KhtmlOpacity in this snippet from the fadeshow.prototype.resetit=function():


else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}

If a browser were ever to take that branch, obj would be undefined. Here's the updated script, it includes a check that prevents, I believe it is IE5, might be earlier, from taking the generic opacity route when it cannot, a tendacy I discovered when we were first working on this script:


<script type="text/javascript">
/***********************************************
* 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 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 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: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);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 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>


A version like this solved the problems Safari users were having, only this one retains both -moz-opacity and -khtml-opacity for any browsers that require them.

EDIT: Removed body section from above code block, it remains the same as on the demo page.

Henkie
03-31-2006, 12:47 PM
I had just fixed the code for Safari when I came across this update. But it is still not perfectly working in Safari (2.0.3) because crossobj.style.opacity is not recognized e.g. is empty. I changed it to crossobj.style.opacity != undefined and it worked.

jscheuer1
03-31-2006, 02:15 PM
I had just fixed the code for Safari when I came across this update. But it is still not perfectly working in Safari (2.0.3) because crossobj.style.opacity is not recognized e.g. is empty. I changed it to crossobj.style.opacity != undefined and it worked.

That would be a problem only, I think, if initial opacity were set to 0 (zero). When something=0 something is usually also false.