Adding line of HTML to slideshow to show "Picture 1 of xxx" etc

[TabithaDas]

1) Script Title: Preloaded Slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

3) Describe problem:
I would like to be able to add a line of text below the picture that says, for example, "Image 1 of 100" and have it change automatically when the user clicks the Previous or Next button. It already has it showing in the status bar but I'd like it to be on the actual webpage instead... Any help?

Thanks in advance! :)

[jscheuer1]

Find this function and add the red parts:


function ShowSlide(Direction) {
var ddiv=document.getElementById? document.getElementById('ddiv') : document.all['ddiv'];
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
ddiv.innerHTML = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}

Add this to the body markup:


<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=140 height=225></td>
</tr>
<tr>
<td colspan="2"><div id="ddiv"></div></td>
</tr>
<tr>
<td><input type="button" name="Previous"
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

[TabithaDas]

Thanks, it works great!!!