Ultimate Fade-in slideshow

Hi dd,

I seem to have misplaced a post, forgot to post it and thought I did, or something else may have happened. In any case, I tested out the pause, seems very robust in all the browsers that I have (IE4+ NS4 and 7.2, Opera8.51, FF1.0.7). The two version4 browsers do not pause though. I also came up with a method to test for:

obj.filters

vs.

obj.style.filter

that does not cause problems in the other browsers or other versions of IE and still retains the modern method for IE6, and presumably future IE versions. The only reason to use it is to make the script work in IE5.5. Without this mod, that browser will only show a faded version of the first image of the first show.

It is just as well that the initial post on this got lost as I have tightened up the code a bit:

Code:

---

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow: © 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]=["photo4.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo5.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo6.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 ie4=document.all
var fadeAssist=0
if (ie4&&typeof document.documentElement!=='undefined')
document.write('<!--[if GTE IE 5]><script type="text/javascript">fadeAssist=function (obj, degree){try {obj.filters.alpha.opacity=degree}catch(e){obj.style.filter="alpha(opacity="+degree+")"}}<'+'\/'+'script><![endif]-->')
 
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 ((ie4&&typeof document.documentElement!=='undefined')||dom)
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:0px;left:0px;filter:alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0px;left:0px;filter: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 ((ie4&&typeof document.documentElement!=='undefined')||dom)
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
mouseover=false
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&fadeAssist)
fadeAssist(obj.tempobj, 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.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=ie4? ie4[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(){
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if ((ie4&&typeof document.documentElement!=='undefined')||dom){
this.resetit()
var crossobj=this.tempobj=ie4? ie4[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=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]&&fadeAssist)
fadeAssist(crossobj, this.degree)
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=obj.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
document.getElementById("master"+this.slideshowid).onmouseover=function(){cacheobj.mouseovercheck=1}
document.getElementById("master"+this.slideshowid).onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>
</head>
<body>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000, 1)
 
</script>

---

Hi jscheuer1:
Thanks for the updated code. Interesting that you're using IE conditional comments within the script. :) I'm going to take all this in and release an update to this script later this week. I'm not sure how much of the new changes I want to include yet, but definitely the part ridding the eval()s and the pause onMouseover feature. I'm still undecided on just how important it is for the script to support/degrade in IE4- it seems if the user is using IE4, this script not working is the least of his problems as every other site doesn't work for him, and his computer is probably crawling with viruses to boot.

You're welcome dd. I will of course respect whatever you decide to do with your script. I'll explain the logic involved in the bit about IE4, as I don't think I made it clear, you decide. The IE4 code just piggybacks on the default slide code, so it doesn't add much, if any weight to the script. The conditional comments are a failsafe way of shielding the try/catch code from any browser that will choke horribly on it. Many will, and there is no way to be certain which ones (though they all are probably fairly old). It appears that just having 'try' in your script will trigger an error in any browser that doesn't support it, even if it is after a normal object test that already excludes that browser. Which brings us to the question of 'why try?' in the first place. That bit of code enables IE5.5 (and versions between it and IE6, if any) to run the show with its full effect using the older object.style.filter="alpha . . ." method which it supports to the exclusion* of the later IE6 method of object.filters.alpha.opacity= " . . . - while still having that later method used in all present and future IE versions that presumably will support it. I wrote this code because you had earlier indicated that you didn't want the browsers that could use the more modern 'filters' method to be stuck using the older 'filter' method. That's it in a nutshell, a coconut shell . . . :)

*IE5.5 thinks that it can use the more modern method though, only throwing an error when you actually use it (It prevents the sript from showing anything except the first image of the first show, and that one is faded out). If there is an object test for this that I have missed, I'd like to know.

Hi jscheuer1:
Ok, I've just formally updated the Fade-in slideshow script by taking your changes and inspirations and reworking them some. The final code contains the following key changes from your last posted version:

1) Replaced completely the alpha filter type used by IE to fade the slideshow.

Since the fade effect is only going to work in IE5.5+ regardless, I figured I might as well just use the newer fade filter that's available only in IE5.5+ (not IE5 for example). This means replacing the code:

filter:alpha(opacity=10);

inside the style sheet that gets written out via document.write() and replacing it with the newer IE5.5+ version instead:

filter:progid:DXImageTransform.Microsoft.alpha(opacity=10)

This 2nd version is IE5.5+ only, but according to Microsoft more efficient than the legacy version. With this change it still doesn't resolve your discovered problem of IE5.5 throwing an error unless the filter is being manipulated through the syntax:

obj.style.filter='alpha(opacity=50)' //IE 5.5 demands this

versus the seeminly preferable syntax:

obj.filters[0].opacity=50 //IE6+ is fine with this

The irony is, the 2nd syntax is what Microsoft has listed as the way to manipulate the alpha filter in IE5.5 with the new filter type defined (verus legacy type). When I ran the demo on Microsoft's site, even that threw an error in IE5.5. So this is definitely MS's fault.

2) Changed the detection code to use two different syntax for changing the opacity in IE, depending on IE5.5 or IE6+.

Due to the IE5.5 problem (which you discovered), I tried to find a way to detect the problem more generically instead of using conditional comments. Luckily I found a solution. The altered code below chooses between two different syntax for changing the opacity depending on IE5.5 or IE6+:

Code:

---

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+")"
}

---

Using typeof let me test to see if the property I wanted to access (opacity) is defined before proceeding. This doesn't throw an error if it isn't, so it works in IE5.5 to degrade gracefully. However, it's interesting to note that IE5.5 does not return "undefined" when you test for opacity as you'd expect, but instead, an undocumented value called "unknown." I dug up some interesting information on this wierd behavior on Google newsgroup (reproduced below, since I can't post the long URL on vBulletin for some reason).

Anyhow, there are a few other minor changes, but the end result is that the slideshow with the fading effect works in IE5.5+, and in IE5.0, everything works but without the fade effect (including linking and pause). In IE4, the slideshow works but without linking nor pause.

Thanks again for all the tests you ran and the great ideas. This script would not have been updated, if at all with some of the changes, without them. Hehe

Google newsgroup post on IE5.x's undocumented "unknown" value when using typeof:

Quote:

---

The following code illustrates some undocumented results using
the JavaScript typeof operator in IE 4.0, 5.0, and 5.5.

Since this is a follow-up, I'll let the code and comments speak
for themselves.
-->
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
// This is perfectly acceptable, since typeof returns "undefined",
// and window.external is a valid object...
var ThisReturnsUndefined = "SomeUnknownMethod";
var t = typeof(window.external[ThisReturnsUndefined]);
alert(t);


// Unfortunately, the following examples don't return "undefined"...


// In IE 4.0, the following generates an error instead of returning
// "undefined". However, under IE 5.0 and IE 5.5, typeof returns
// "unknown". Both of which are undocumented. After all, since
// window.external is a valid object, the typeof operator should
// return "undefined".
// Why does this generate an error in IE 4.0, and return "unknown"
// in IE 5.0 and 5.5?
// Because window.external is an IDispatch interface which inherits
// from IUnknown, and thus it contains the following "inaccessible"
// methods:
// - AddRef
// - Release
// - QueryInterface
// - Invoke
// - GetIDsOfNames
// - GetTypeInfo
// - GetTypeInfoCount
// However, just querying for these methods using the typeof
// operator does not gracefully return "undefined"...
var ThisReturnsError = "GetTypeInfoCount";
var t = typeof(window.external[ThisReturnsError]);
alert(t);


// Just like above, the following generates an error under IE 4.0,
// and returns "unknown" under IE 5.0 and IE 5.5. Again, of
// which both are undocumented. According to Microsoft's
// JScript documentation, the typeof operator should only
// return 6 possible string values: "number", "string", "boolean",
// "object", "function", and "undefined". As you can see,
// "unknown" is not in this list.
// Querying for any of the the following properties or methods
// produces these results...
/*
typeof() IE40 IE50 & IE55
------------------------------------------------------------
window.external.menuArguments undefined undefined
window.external.AddChannel error unknown
window.external.AddDesktopComponent error unknown
window.external.AddFavorite error unknown
window.external.AutoCompleteSaveForm undefined unknown
window.external.AutoScan undefined unknown
window.external.ImportExportFavorites undefined unknown
window.external.IsSubscribed error unknown
window.external.NavigateAndFind undefined unknown
window.external.ShowBrowserUI undefined unknown
*/
var ThisReturnsUnknownInIE5Plus = "isSubscribed";
var t = typeof(window.external[ThisReturnsUnknownInIE5Plus]);
alert(t);


// Thought you might find this interesting.
//
// Enjoy,
// -Jim Rofkar.
// jrof...@cros.net
// -->
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

---

Yay! :D

I was just looking at the current demo of this script and noticed a potential problem. In the long document.write line this string appears twice:

Code:

---

filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:10;

---

I'm responsible for that (the red part at the end) but, when I added that I also added code in the the fadepic() and the fadeshow.prototype.resetit functions to process opacity for those browsers that support just generic opacity.

Now, I am not aware of any that do other than some Mozilla based browsers but, they also handle -moz-opacity. I think there may be one or some though. So, either it should be removed from the document.write line in the two spots where it appears, or code added to the above mentioned two functions to process it.

From doing this already, my versions had code to handle generic opacity in those functions, I found that some earlier IE's that like obj.filters but not object.filters[0] will choose it (generic opacity) even though they don't support that either. To screen them out, the conditional for generic opacity needed to be:

else if (obj.style.opacity&&!obj.filters)

Thanks for spotting that, I've gone ahead and removed "opacity:10" inside document.write(). It shouldn't be a problem even if left there though, since inside the script itself I had removed any code pertaining to testing and changing this CSS3 property. I've heard some Mozilla browsers support this property, though I guess I'm just too lazy to see which ones due to the fact that moz-opacity works right now. heh

im having an issue with the randomness
sure it can display random images just fine, but if the image is assigned a link it ends up bing wrong sometimes (because the links seem to be randomly picked as well)

now i will admit i may have overused the script a bit, but my site is www.megaman-community.com and the affiliates buttons arent showing proper links

could someone tell me what's wrong? or if a fix needs to be made to the script?

For starters, please put the credit for the script on the page where it can be seen when someone views the source.

The reason that the links are getting messed up is that you have several slideshows on the page all using the same array of images and links. As each individual show makes its own image only array (for preloading) from this array that corresponds to the one with the links, this has defeated the ability of the script to keep each slideshow operating exclusively in a separately named code space. As each subsequent show is loaded the main array (with its links) is shuffled, disconnecting it from the previous show's image only array. You can use the same images for each show but, you need to make up a separate array containing them with a separate name for use with each slideshow.

The script may be able to be rewritten to allow its use in the manner you have tried, but it would be much simpler to use separate arrays, If you want, you can get away with only defining the array once and then assigning it to as many unique names as you have shows, each to be used with a single show:

Code:

---

var affbuttons=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
affbuttons[0]=["http://www.pluginexe.com/atomicfire.gif", "http://www.atomic-fire.com/", "_blank"]
affbuttons[1]=["http://themechanicalmaniacs.com/layout/aff/affiliate5.gif", "http://www.themechanicalmaniacs.com/", "_blank"]
affbuttons[2]=["http://www.kingdom-hearts2.com/zerov/pmm.gif", "http://www.planet-megaman.com/", "_blank"]
affbuttons[3]=["http://plug-in.planet-megaman.com/linktobutton-20.jpg", "http://www.pluginexe.com/", "_blank"]
affbuttons[4]=["http://www.rockmantv.com/images/8831affbutton.jpg", "http://www.rockmantv.com/", "_blank"]
affbuttons[5]=["http://www.megaman-sprites.com/aff/sprites_inc.gif", "http://www.megaman-sprites.com/", "_blank"]

affbuttons0=affbuttons1=affbutttons2=affbuttons3=affbuttons

---

Use as many affbuttons# as you need. Just to be on the safe side, define all of them before creating any slideshows that use them and do not use the original affbuttons array in any of the slideshows. Assign each individual affiliate show its own numbered affbuttons# array:

Code:

---

<table class="tborder" cellpadding="6" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px"> <tr align="center"> <td class="vbmenu_control"> <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(affbuttons0, 88, 31, 0, 5000, 1, "R")
</script> </td> <td class="vbmenu_control"> <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(affbuttons1, 88, 31, 0, 5000, 1, "R")
</script> </td> <td class="vbmenu_control"> <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(affbuttons2, 88, 31, 0, 5000, 1, "R")
</script> </td> <td class="vbmenu_control"> <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(affbuttons3, 88, 31, 0, 5000, 1, "R")
</script> . . .

---