-
Ult fade show - tooltips and captions
1) Script Title: Ultimate Fadein Show
2) Script URL (on DD):
3) Describe problem: this is a great slideshow, especially as it fades properly in Mozilla. I've added tooltips and captions to it, and if anyone is interested this is the extra scripting (with line nos added):
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
1/if (this.theimages[picindex][1]!="") //if associated link exists for image
2/slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
3/slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" title="'+this.theimages[picindex][3]+'">' // tooltip
4/if (this.theimages[picindex][1]!="") //if associated link exists for image
5/slideHTML+='</a>'
6/slideHTML+='<p>' // push captions down a bit
7/if (this.theimages[picindex][1]!="") // new href
8/slideHTML+='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
9/if (this.theimages[picindex][4]!="") // if caption exists for this image
10/slideHTML+='<div id="slideHTML">'+this.theimages[picindex][4]+'</div>' // the caption
11/if (this.theimages[picindex][1]!="") //if associated link exists for image
12/slideHTML+='</a>'
13/picobj.innerHTML=slideHTML
}
on ln3, this bit:
title="'+this.theimages[picindex][3]+'"
is added, whilst lines 6 to 12 inclusive are new. The captions are basically text boxes displaying under the image, and fading over as the image fades over. The array is in this format:
var fadeimages1=new Array()
fadeimages1[0]=["/path/to/image001.jpg", "URL", "", "tooltip (title)", "caption"]
Seems to work quite well. (I have two questions, but I'll post those in separate threads.)
Cheers
Lyn
-
-
problem getting caption to display
I used your modified script and I can get the tooltip to display but not the caption. I've also modified the script to stop rotating after one go around - if that makes a difference. What do you think I did wrong to not get the captions to show up? Thanks for your help!
Here's my array:
var fadeimages1=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages1[0]=["pic1.jpg", "link.html", "", "photo 1", "caption"]//image with link syntax
fadeimages1[1]=["pic2.jpg", "link2.html", "", "photo 2", "caption2"] //image with link syntax
fadeimages1[2]=["pic3.jpg", "link3.html", "", "photo 3", "caption3"] //image with link syntax
And here's the modified part of the original script that I got from you:
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" title="'+this.theimages[picindex][3]+'">' // tooltip
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
slideHTML+='<p>' // push captions down a bit
if (this.theimages[picindex][1]!="") // new href
slideHTML+='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
if (this.theimages[picindex][4]!="") // if caption exists for this image
slideHTML+='<div id="slideHTML">'+this.theimages[picindex][4]+'</div>' // the caption
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks