PDA

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



vrm
01-11-2006, 03:36 AM
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

jscheuer1
01-11-2006, 04:50 AM
First of all, please retain the credit for the script on the page(s) that use it, replace:


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

with:


<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:

<!--

-->

<!-- Begin

// End -->

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.

vrm
01-11-2006, 07:15 AM
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

jscheuer1
01-11-2006, 07:47 AM
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:


<!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>

vrm
01-11-2006, 02:51 PM
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

Twey
01-11-2006, 04:26 PM
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.

jscheuer1
01-11-2006, 07:39 PM
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:


/***********************************************
* 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()
}

vrm
01-12-2006, 04:39 PM
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

jscheuer1
01-12-2006, 08:09 PM
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.