DHTML Slideshow (manual)

[dmwhipp]

I love your DHTML Slideshow (manual)! I am using it on a family website here:
http://www.dwwebdesigns.com/hayes/announce.html

I had help in this forum previously reducing the transition to one effect and it works perfectly.

Does anyone know of any way to add text/captions to the images? The text would obviously have to change with each image.

Thanks in advance,
Deborah Whipp

[jscheuer1]

There are various ways to do this, I chose this one -

Change your array to look like this (edit the captions as desired):

//define images. You can have as many as you want:
photos[0]=["/hayes/slideshow/ss01.jpg", "caption here1"]
photos[1]=["/hayes/slideshow/ss02.jpg", "caption here2"]
photos[2]=["/hayes/slideshow/ss03.jpg", "caption here3"]
photos[3]=["/hayes/slideshow/ss04.jpg", "caption here4"]
photos[4]=["/hayes/slideshow/ss05.jpg", "caption here5"]
photos[5]=["/hayes/slideshow/ss06.jpg", "caption here6"]
photos[6]=["/hayes/slideshow/ss07.jpg", "caption here7"]
photos[7]=["/hayes/slideshow/ss08.jpg", "caption here8"]
photos[8]=["/hayes/slideshow/ss09.jpg", "caption here9"]

A word of caution, do not use double quotes (") within the captions without escaping them, ex:

photos[0]=["/hayes/slideshow/ss01.jpg", "Baby "Sparky""]

is bad but:

photos[0]=["/hayes/slideshow/ss01.jpg", "Baby \"Sparky\""]

is fine.

Now we need to modify other parts of the script. Replace the backward and forward functions with these (changes red):

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which][0]
document.all? document.all['cap'].innerHTML=photos[which][1] : document.getElementById('cap').innerHTML=photos[which][1]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which][0]
document.all? document.all['cap'].innerHTML=photos[which][1] : document.getElementById('cap').innerHTML=photos[which][1]
playeffect()
keeptrack()
}
}

Add to the script in the body section like so (red again):

<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0][0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0><div id="cap">'+photos[0][1]+'</div>')
if (linkornot==1)
document.write('</a>')
</script>

[dmwhipp]

Hi John,
Thanks so much for your quick reply.

I made the changes and uploaded them to a temp page here:
http://www.dwwebdesigns.com/hayes/announce2.html
but I must have missed some little thing. The caption is displaying perfectly for the slideshow, but Next and Previous are no longer working so you cannot scroll through the photos.

If you could possibly look at my code and see what I did wrong, I'll give you my firstborn (WARNING: it's a teenager with a license and attitude).

Deborah

[dmwhipp]

Hi John,
I found the error myself. I cut and paste your instructions and forgot to remove a bit before uploading.

You can still have my teenager though

Deborah