PDA

View Full Version : Adding line of HTML to slideshow to show "Picture 1 of xxx" etc



TabithaDas
10-09-2006, 11:08 PM
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
10-10-2006, 04:48 AM
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
10-10-2006, 03:42 PM
Thanks, it works great!!!