Ultimate Fade-in slide show- show text descriptions?

[bobvaz]

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: This code is just what I was looking for and thank you very much. However, I need to make a change and don't know how to do it. All my attempts have resulted in no images being displayed. My problem is displaying text under each of the rotating images. I tried to 'steal' some of the code from other image scripts but was unsuccessful. Any help would be appreciated. Thanks in advance.

[ddadmin]

Are you having trouble getting images to show by default (without changes to the code)? If so, make sure teh paths to the images inside the script are correct. When in doubt, use absolute URLs, like:

http://www.mysite.com/images/photo1.jpg

etc.

[bobvaz]

The script works fine -- images show and rotate etc, however, I would like to include a description beneath each image and although I have tried stealing the code from others (Interactive image slideshow with text description, as an example) I incorporate the changes, refresh the screen, and I get no images. I think I am doing something wrong, and, if possible, would like to know where to add the code in the slide show.
Thanks.

[boogyman]

You need to create a seperate area for your caption to display in... then you can place it whereever you want... if you want it underneath the image then place the extra space/tag underneath then just reference your corresponding image and caption to appear in both of the tags. hope this helps

[ddadmin]

This should be quite simple to add- I'll post some code later today or tomorrow here.

[ddadmin]

Ok, to add an optional textual description to Ultimate Fade In slideshow, do the following:

Step 1: Modify your images array by adding a 4th parameter to each element:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["../photo1.jpg", "", "", "I'm George"] //plain image syntax
fadeimages[1]=["../photo2.jpg", "http://www.cssdrive.com", "", "I'm Sarah"] //image with link syntax
fadeimages[2]=["../photo3.jpg", "http://www.javascriptkit.com", "_new", "Who are you?"] //image with link and target syntax

As you can see, the 4th parameter now contains the text you want shown beneath the image in question. Remove this parameter for images that you don't want a description.

Step 2: Then, modify function populateslide() with the below small change:

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>'
if (typeof this.theimages[picindex][3]!="undefined") //if this image contains a description
slideHTML+='<div>'+this.theimages[picindex][3]+'</div>'
picobj.innerHTML=slideHTML
}

That's it. Be sure the height of your slideshow is tall enough to contain the descriptions, or they'll be clipped:

new fadeshow(fadeimages, 140, 325, 0, 3000, 1, "R")

[bobvaz]

Sorry for the late response - I will give your suggestion a whirl. Thanks for the quick reply.

[bobvaz]

It worked perfectly!!!! However, would like to make one more change.....Is it possible to control the size and color of the font on the description that was added? again, thanks.

[dmwhipp]

I tried following your instructions, but my text is not appearing beneath the images. Is there any way you could look at my code and see what I am doing wrong?

http://www.findahomepa.com/index.html

Thanks,
Deborah

[jscheuer1]

The Swiss Army Image Slideshow already does this:

http://www.dynamicdrive.com/dynamici...army/index.htm

It can be configured to show only images plus text descriptions. HTML code may be included in the descriptions.