Ultimate Fade-in slideshow

First of all Bravo! on this great upgrade. This is not so much a script bug as a documentation bug, where it says on the demo page, for step two:

Code:

---

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

---

It should be:

Code:

---

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

---

Now, personally I'd prefer the term 'slide_interval' to 'pause' to describe that parameter, so as not to confuse it with a feature (much asked for) that this slideshow doesn't have, the ability to pause onmouseover. I've tried before to add that to it but, the code was too complex to allow for the usual method of doing so, now it is even more involved.

Thanks. Interestingly I noticed this error in the docs earlier today before reading this thread and corrected it. :)

Great, big improvement (the entire script, I mean). Now we may stop getting so many requests to add all those things. I only noticed the omission so soon because someone was trying to get rid of the border and having a hard time of it. I have a question on the new version though. I haven't given up trying to add a pause. I had one attempt that was working pretty well on the old version. My question is this, where the new version has:

Code:

---

                var temp='setTimeout("fadearray['+obj.slideshowid+'].rotateimage()", '+obj.pause+')'
                eval(temp)

---

How is that better than:

Code:

---

        setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.pause)

---

which seems to work as well and would make it a tad bit easier to add an onmouseover pause.

I looked over this script a bit more and found that it was having problems on older browsers that, it seemed designed to work with. IE4 and 5 in particular. I also noticed that it didn't have code for browsers that support the simple:

style="opacity:10;"

Adding that caused some additional problems in ie4 and 5 but, I was able to fix that with more means testing.

NS4 used a different layout on the page than the others when there were more than one instance (inline as opposed to block), that was an easy change.

While I was at it, I found a way to eleiminate 'eval' from the script entirely. Tested on IE4, 5 and 6, FF1.0.7, NS4 and Opera8.51:

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

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, pause, displayorder){

        this.pause=pause
        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 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.pause)
        }
}

function fadepic(obj){
        if (obj.degree<100){
                obj.degree+=10
                if (obj.tempobj.filters&&obj.tempobj.filters[0])
                        obj.tempobj.filters.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.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.pause)
        }
}

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 ((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])
                crossobj.filters.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
        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)
        this.rotateimage()
}

</script>
</head>
<body>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, border_width, pause, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000)

</script>

---

Neither version will work here in IE5.5

Hi:
Thanks for cleaning on some of my hasty code! eval() is evil, so if it can be avoided it's always good. I use it whenever I'm too lazy to try a more direct approach first- it's definitely a bad habit.

Quote:

---

style="opacity:10;"

---

From what I understand this is actually a CSS 3 property that works in the least number of browsers right now (maybe in Mozilla). There's no harm in adding it in right now, but I guess it does add more weight to the code.

Quote:

---

NS4 used a different layout on the page than...

---

Hmm neglected to test the script in NS4, but I see no reason not to throw in a DIV for formatting.

Quote:

---

this slideshow doesn't have, the ability to pause onmouseover...

---

Off the top of my head I think it's going to take a little work, perhaps reorganize some of the code first. Once I get the chance I'll take a crack at it. With a pause feature part of the delima is when to pause the slideshow when the user moves the mouse as the slideshow is fading from one image to another, and both are partially visible. Do we continue to play the slideshow and pause when the image has faded in completely, or pause immediately regardless?

At the very least I think I'll incorporate some or most of your changes above. Just need to run a couple of browser tests. Thanks again!

Quote:

---

Originally Posted by ddadmin

Off the top of my head I think it's going to take a little work, perhaps reorganize some of the code first. Once I get the chance I'll take a crack at it. With a pause feature part of the delima is when to pause the slideshow when the user moves the mouse as the slideshow is fading from one image to another, and both are partially visible. Do we continue to play the slideshow and pause when the image has faded in completely, or pause immediately regardless?

---

That has always been about the crux of my dilemma whenever I tried to pause the original version of this script. More precisely, for me, with so much going on, not only when/where to pause but also, how to pick up where I left off. I did have it working in IE6, I think. I'll go back, I still have those files.

Ideally, I would want it to pause to the next full image with backward and forward buttons appearing but, any workable method would be welcome for the many folks that have requested this feature in the past.

Quote:

---

Originally Posted by ddadmin

Just need to run a couple of browser tests

---

The only browser that I haven't been able to get either of the new versions to work in, either with or without fading is IE5.5. IE5.5 likes object.filters but, doesn't do object.filters.alpha.opacity=value. It will do:

Code:

---

object.style.filter='alpha(opacity=value)'

---

But, creating a test via means seems impossible. One thought that just struck me is possibly a try/catch setup. Another possibility is that if IE5.5 will handle it gracefully using the more verbose syntax of DMX transform, or whatever that is (escapes me, the precise syntax for that at the moment). I'm pretty sure IE6 will like that as well.

OK, I now have the new version working in IE5.5 degrading well in earlier IE's and still working in IE6. I had to abandon the more modern:

Code:

---

object.filters.alpha.opacity=value

---

in favor of the archaic, but still supported:

Code:

---

object.style.filter='alpha(opacity='+value+')'

---

where 'value' is a variable containing the number value as a number or a string.

FF, Opera, NS4 are unaffected (still working) with this change:

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

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, pause, displayorder){

        this.pause=pause
        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 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.pause)
        }
}

function fadepic(obj){
        if (obj.degree<100){
                obj.degree+=10
                if (obj.tempobj.filters&&obj.tempobj.filters[0])
                        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.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.pause)
        }
}

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 ((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])
                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
        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)
        this.rotateimage()
}

</script>

---

Hi jscheuer1:
One concern I have with directly changing the filter string:

Code:

---

object.style.filter='alpha(opacity='+value+')'

---

is that it's a lot less efficient than going through the filter object step by step. I must admit I also wonder a little how many people need this script to work in IE5.5 and below heh.

Regarding the pause onmouseover feature, I took your first modified script above and added one in. I've hightlighted my changes in red. Everything looks fine, though I haven't thoroughly tested it yet:

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]=["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 ie4=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 ((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])
obj.tempobj.filters.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.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])
crossobj.filters.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
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, 0, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 1)
 
</script>

---

Just a quick explanation on the logic of my added code. I thought the best time to pause the slideshow once a person moves his mouse over the slideshow is after any fading effect has been completed. So if he moves the mouse over it while an image is being faded in, the script continues to play and only pauses after that fade effect has completed itself. Based on that, the code:

Code:

---


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

---

binds the two relevant mouseover events to the sllideshow itself if the pause feature is enabled that merely toggles a variable to let the script know at all times whether the user's mouse is currently over the slideshow (mouseovercheck=1). Inside function rotateimage(), the addition:

Code:

---

var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if ((ie4&&typeof document.documentElement!=='undefined')||dom)

---

picks up on this, and if the user's mouse is currently over the slideshow, simply continue to run rotateimage() incessantly without doing anything until the mouse is out of it.

Quote:

---

Originally Posted by ddadmin

One concern I have with directly changing the filter string

---

I was just thinking about that and have come up with:

Code:

---

function fadepic(obj){
        if (obj.degree<100){
                obj.degree+=10
                if (obj.tempobj.filters&&obj.tempobj.filters[0])
                try {
                        obj.tempobj.filters.alpha.opacity=obj.degree
                        }catch(e){
                        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.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.pause)
        }
}

---

and:

Code:

---

fadeshow.prototype.resetit=function(){
        this.degree=10
        var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
        if (crossobj.filters&&crossobj.filters[0])
        try {
                crossobj.filters.alpha.opacity=this.degree
                }catch(e){
                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
        else if (crossobj.style.opacity&&!crossobj.filters)
                crossobj.style.opacity=obj.degree/101
}

---

To deal with just that concern and the fact that the older method may no longer be supported in IE7 or some future version. I'm not overly concerned with the backwards compatibility but, you know someone will be shocked if they get this thing going in IE5.5 and it wipes out on them. Perhaps this will even make it IE5 Mac compatible.

I will give your pause code a shot here and run it through its paces.

Added Later:
Oh, heck! try/catch messes up NS4 and IE4 :(
There do seem to be ways around this though. It is odd how even though those browsers are already excluded from the code areas where try is used, they still choke on it. Using language versions in the script tag will screen NS4 and using if/endif screens can keep out IE4 but, that means breaking the code up a bit into separate script blocks.

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

---

Hi!

I found this thread after I posted this question in another, but seems like this might be a better place for it.

What changes to the script would I need to make if I wanted to display a caption for each image below the image itself? I saw with a search, there was an older version of the fade-in script where the caption was an additional field in the array with the image and wondered what it would take to add that to the ultimate version. :)

Thanks!
Tom

Quote:

---

Originally Posted by jscheuer1

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

---

---

i've added the script credit to the actual page (it was in the js file before, now its there AND in the page source)

i tried the fix you said there, it didnt seem to work, the slideshows still display, but i have the same problem with the links

That's what I get for not testing this one out, it appears that this type of syntax is required (example taken from the demo) to define the arrays:

Code:

---

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 faders=['fadei0', 'fadei1', 'fadei2', 'fadei3']

for (var i_tem = 0; i_tem < faders.length; i_tem++)
faders[i_tem]=new Array();

for (i_tem = 0; i_tem < fadeimages.length; i_tem++)
faders[0][i_tem]=faders[1][i_tem]=faders[2][i_tem]=faders[3][i_tem]=fadeimages[i_tem]

---

Then to use them in individual shows:

Code:

---

new fadeshow(faders[0], 140, 255, 0, 3000, 1, "R")
new fadeshow(faders[1], 140, 255, 0, 3000, 1, "R")
new fadeshow(faders[2], 140, 255, 0, 3000, 1, "R")
new fadeshow(faders[3], 140, 255, 0, 3000, 1, "R")

---

that seems to have done the trick, although that's a lot more complex than i would have guessed it needed to be
but none the less thank you, im getting a stronger grip on javascript as well (im a php coder so it's pretty similar)

Hi all. First, I goofed on my registration, so I would ask that you delete user "rscptt7706". Sorry for the inconvenience.

Here is a link top a page that I am trying without success to load three sessions of the fadein's. I know I am probably missing an obvious step, but I have been over it several (numerous) times and can't find the glitch.

Could you look at it for me??

Thanks so much!!

fadeinslideshow3b


:) RScott7706

rscptt7706, the third one is being displayed- just scroll down your page to see it. :) You probably will want to increase the height of the slideshow, as it's being clipped right now.

With that said, I'm going to close this thread, as it was originally meant just to report bugs. The correct forum to post for help/support on a script is here.