Ultimate Fade-in Slideshow: can't find my error

Printable View

01-11-2006, 03:36 AM
vrm

Ultimate Fade-in Slideshow: can't find my error

Hi Folks,

Love the script. I am on a Mac and finding a javascript slideshow with a fade affect that can be seen on the Mac is great.

I prefer to have my scripts in a separate file from my pages; I use Dreamweaver templates to create the site.

I set up a test page: http://www.bostontenpoint.org/testpage/test2.html
and got the following results on my Mac:

Netscape 7.2 :: OK
FireFox 1.5 :: OK
Safari 2.0 :: no fade
Explore 5.2 :: no image
Opera 8.5 :: no image

Could someone point out my error?

If you happen to be on a PC, I would appreciate you letting me know if you see the slideshow and the fade, and what browser.

Thanks.
VRM
01-11-2006, 04:50 AM
jscheuer1

First of all, please retain the credit for the script on the page(s) that use it, replace:

HTML Code:

<script type="text/javascript" src="../p7pm/ultimate.js"></script>

with:

HTML Code:

<script type="text/javascript" src="../p7pm/ultimate.js"> /*********************************************** * 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. ***********************************************/ </script>

Oh, and please do similar with other DD scripts you are using. Now, there may be other problems, especially in IE Mac 5.2 and Safari 2.0 may never be able to 'get' the fade but, to get it working in some or all of the other browsers you did mention, this may be all that is needed (it certainly is required for IE and Opera). Remove these four lines from the external file:





Notes: The last one could stay, as it is commented out but, who needs it? Also, they could all stay if commented out but again, they serve no purpose, get rid of them all.

If Safari is still not fading, there are some tests I could guide you through to possibly determine the cause, if you are interested.
01-11-2006, 07:15 AM
vrm

Thanks.

The credits have been added.

The script is working on all browsers.

I would appreciate the test to see why Safari is not "fading".

The test page is gone because the slideshow has been moved to the main site:
http://www.bostontenpoint.org/

Sincerely,
VRM
01-11-2006, 07:47 AM
jscheuer1

I said tests, plural. You see, I don't have a Safari or a Mac but, I know why this script is supposed to fade in Safari, it is the -khtml-opacity style property that is supposed to make that happen. So, the first test is to see if that is working and/or if Safari will respond to generic opacity. Copy the page below and see if either image or both are about half opaque in Safari:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Safari Opacity Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="-khtml-opacity:0.50;"><br> <img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="opacity:0.50;"> </body> </html>
01-11-2006, 02:51 PM
vrm

With
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="-khtml-opacity:0.50;"> = Solid image
<img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="opacity:0.50;"> = %50 opacity

With
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Same results
01-11-2006, 04:26 PM
Twey

Quote:

Originally Posted by John

Notes: The last one could stay, as it is commented out

Actually, all of them except the second are commented out. <!-- at the beginning of the line is counted as a comment symbol in Javascript, for just such a situation.
01-11-2006, 07:39 PM
jscheuer1

Quote:

Originally Posted by vrm

With
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="-khtml-opacity:0.50;"> = Solid image
<img src="http://www.bostontenpoint.org/images/images_rotate/01.jpg" style="opacity:0.50;"> = %50 opacity

With
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Same results

That's what I thought might happen after doing a little research on Safari and opacity. I'm not quite sure why the author of the script thought -khtml-opacity would work for Safari except that some information on the web seems to indicate that it would. However, there is even more info that says to use generic opacity for Safari. Since, modern Mozilla can use generic opacity as well, I think we will try just switching over to that.

Try this for your external script, test it in all the browsers, not just Safari:

Code:

/*********************************************** * 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]=["http://www.bostontenpoint.org/images/images_rotate/01.jpg", "", ""] fadeimages[1]=["http://www.bostontenpoint.org/images/images_rotate/02.jpg", "", ""] fadeimages[2]=["http://www.bostontenpoint.org/images/images_rotate/03.jpg", "", ""] fadeimages[3]=["http://www.bostontenpoint.org/images/images_rotate/04.jpg", "", ""] fadeimages[4]=["http://www.bostontenpoint.org/images/images_rotate/05.jpg", "", ""] fadeimages[5]=["http://www.bostontenpoint.org/images/images_rotate/06.jpg", "", ""] fadeimages[6]=["http://www.bostontenpoint.org/images/images_rotate/07.jpg", "", ""] fadeimages[7]=["http://www.bostontenpoint.org/images/images_rotate/08.jpg", "", ""] fadeimages[8]=["http://www.bostontenpoint.org/images/images_rotate/09.jpg", "", ""] 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;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;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.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.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() }
01-12-2006, 04:39 PM
vrm

Hey John, I think we have a winner

The description of the script states: "The cool fading effect works in IE, NS6+/ Firefox, and Safari 2, while all other browsers such as Opera 8 will simply skip the effect but continue to display the images."

Test page: http://www.bostontenpoint.org/testpage/test2.html
Testing modified script
Test results on Mac OS X:
-- Netscape 7.2 >> OK
-- FireFox 1.5 >> OK
-- Safari 2.0 >> OK
-- Explore 5.2 >> no fade [fine since IE no longer supports Mac]
-- Opera 8.5 >> no fade [acceptable]

This modification matches the description of the script. THANKS!!!

What I would like to know is if my PC counterparts will still see the cool effect, if I use this modified script?

Sincerely,
VRM
01-12-2006, 08:09 PM
jscheuer1

Quote:

Originally Posted by vrm

What I would like to know is if my PC counterparts will still see the cool effect, if I use this modified script?

Yep! I had originally wanted DD to go with code similar to what I wrote for this modification but, was overruled (I don't work here, it just seems like I do). I think DD may now be persuaded.

Even though you seem fine on these two, some explanation:

About IE5.2 Mac - That is the same behavior for both the original and this modified version on IE5.1 PC (IE5.5 PC works fine). Seems opacity filters were included in the code for those first two browsers yet, at the same time, not implemented. It's a Microsoft thing.

About Opera - Opera doesn't do partial transparency of any kind.