Tweaking the Ultimate Fade-in slideshow script

[bobbby]

Hi everybody,

I got a question about the Ultimate Fade-in slideshow (v1.5) script
http://www.dynamicdrive.com/dynamici...nslideshow.htm

You have the option to enter a link and target for your picture:

var fadeimages=new Array()
fadeimages[0]=["images/thumb1.jpg", "", ""]
fadeimages[1]=["images/thumb2.jpg", "bigpicture2.jpg", "_blank"][/

But I want to make a link with a "rel" attribute. In a normal link it would look something like this:

<a href="bigpicture2.jpg" rel="lightbox">Big Picture 2</a>

Is there a way to change the fade-in script to allow adding a "rel" attribute?

[jscheuer1]

Yes but, that will not be enough to get lightbox to work with the ultimated fade-in script. This can be done but requires more than adding the rel attribute which can be done here (addition red):

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]+'" rel="lightbox">'
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
}

The reason just adding the rel will not make lightbox work is that the lightbox script depends upon being initialized after the page is drawn. Normally the rel attributed links don't change too much after that but, with ultimate fade-in, they are changed with each fade of an image. I cannot be sure of the best place to reinit lightbox or exactly how (it varies in some of the different versions) but, a good place (a likely choice) and method (works for most lightbox versions) would probably be at the end of the above function:

 . . . ssociated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
initLightbox();
}

[bobbby]

Once again I'm very impressed with your knowledge, John. It works perfectly in FF and Opera, but IE7 doesnt want to open the page anymore ("cannot open page, operation cancelled").

I'm using Lightbox image viewer 2.0 btw.

Any more ideas?

[jscheuer1]

Try it in the current version of IE. I'm not planning on debugging scripts for IE 7 until it is in full release. If IE 6 gives problems, post a link to your example page and I will try to figure it out.

[jscheuer1]

Oh, and I am curious though, IE 7 won't load the page with the slide show on it, or gives the error when you click on the image?

[bobbby]

You can only have one version of IE installed, so I cant try it in IE6 right now, but I'll try it somewhere else soon.
IE7 wont show the page at all.

[jscheuer1]

Well, if you put up a demo page somewhere, I can test it for you in IE 6 and see if anything jumps out at me. Do both scripts work OK in IE 7 when tried on separate pages?

[bobbby]

I just tried it in IE6. Same error. I did notice a curious message in my statusbar though: opening page "res://C:\windows\system32\shdoclc.dll/dnserror.htm"

I don't know what it means yet, but perhaps you do.

I got both scripts working fine on the same page in IE7, but right now I'm using text links to open pics with lightbox and not the pictures (thumbnails) that fade-in.

I'm gonna put a page up for you in a few hours, so you can see for yourself. The current page is a bit of a mess...

[bobbby]

I just made a clean page with just the essential items.

It works in all browsers except IE6/7.

The page does work in IE if I only use the text links "enlarge", but I would like the thumbnails to link to the larger picture. It's what people expect... If I make the thumbnails into links using jscheuer1's script, IE gives the error.

Thanks in advance

[jscheuer1]

This will have to be a mystery for the ages unless someone else can figure out why this is happening. I figured out a solution but, have no idea why it works or why it was a problem to begin with. Here is the solution, remove:

initLightbox();

from where we originally placed it and move it to here (green in below code), make sure to add the braces as well (red):

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
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)
if(obj.flag&&obj.onetime){
initLightbox();
return;
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
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)
}
}

In fact, since you've been such a good sport about all this, use this version of the script, it works with LightBox and will fade in the recent Opera as well as IE and FF. I don't know about LightBox for Safari but, this version of U-fade will work for it:

		<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Updated for better Safari & Opera 9+ Compliance,
* a once through option and LightBox 2.0 tie in
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var stagger=1000

var fadeimages=new Array()
fadeimages[0]=["loadingsmall.gif", "", ""]
fadeimages[1]=["photo1.jpg", "photo10.jpg", ""]
 
var fadeimages2=new Array()
fadeimages2[0]=["loadingsmall.gif", "", ""]
fadeimages2[1]=["photo2.jpg", "photo11.jpg", ""]

var fadeimages3=new Array()
fadeimages3[0]=["loadingsmall.gif", "", ""]
fadeimages3[1]=["photo3.jpg", "photo12.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, onetime, displayorder){
this.flag=0
this.onetime=onetime
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=0 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
if(obj.flag&&obj.onetime){
initLightbox();
return;
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
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]+'" rel="lightbox[decora]" title="Decora Serie">'
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+"])",75)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script>