Ultimate Fade In Slide Show (ver 1.5)

[justpete]

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Hello,
Just signed up and first time to post. Question on Fade Show. I hope I'm doing this all right. I play with web pages more for hobby than anything, just learning on my own.
Question:
I was able to figure out how to do this script. Haven't posted yet as I was hoping to figure something out. I want to have 3 pictures show as part of an introduction to a page, however I don't want them to loop. I have the 'copyright' heading so I'm not going to not give credit where due, but didn't know if it was ok to stop the loop so it will stay on last picture. Also, I need help to do this. I'm sure there is a spot to take out or something but don't know what it is. Thank you for help.
justpete

[ddadmin]

Check out the solution by jscheuer1: http://www.dynamicdrive.com/forums/showthread.php?t=6567

[TCArknight]

Hi!

I've got somewhat of a related question. Is there any way to have a caption for a displayed image show below it or as a tooltip when the picture is moused over?

Tom

[jscheuer1]

Sure, add to the array for whatever slideshow(s) you want to have captions and tooltips:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", "", "cap1"] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "cap2"] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "cap3"] //image with link and target syntax

Replace the fadeshow.prototype.populateslide function with this one:


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+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'
if (this.theimages[picindex][3])
slideHTML+='<div align="center">'+this.theimages[picindex][3]+'</div>'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Be sure to increase the height parameter when invoking the slideshow to insure adequate space for the caption to appear:


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

</script>

[TCArknight]

Wow!

Thanks! works great! Maybe this option should be included in version 1.6? :)

Tom