I have the following Slide Show script that works perfectly for my application, but I would like to add a “slide” counter, meaning two small windows embedded within the show that display which slide the viewer is currently seeing and another window displaying the total number of slides in the slide show.
I tried various attempts at the aforementioned, but none seem to work properly.
Any help would be deeply appreciated.
Regards,
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript">
var group1 = [];
group1[0] = "PopUps/driftwoodstand-100_1413.jpg";
group1[1] = "PopUps/driftwoodstand-100_1413.jpg";
group1[2] = "PopUps/driftwoodstand-100_1414.jpg";
group1[3] = "PopUps/driftwoodstand-100_1415.jpg";
group1[4] = "PopUps/driftwoodstand-100_1413.jpg";
group1[5] = "PopUps/driftwoodstand-100_1413.jpg";
group1[6] = "PopUps/driftwoodstand-100_1414.jpg";
group1[7] = "PopUps/driftwoodstand-100_1415.jpg";
group1[8] = "PopUps/driftwoodstand-100_1414.jpg";
group1[9] = "PopUps/driftwoodstand-100_1415.jpg";
var textCaption = [];
textCaption[0]= "Drift Wood Mounted on a Stand 1413";
textCaption[1]= "Drift Wood Mounted on a Stand 1413";
textCaption[2]= "Drift Wood Mounted on a Stand 1414";
textCaption[3]= "Drift Wood Mounted on a Stand 1415";
textCaption[4]= "Drift Wood Mounted on a Stand 1413";
textCaption[5]= "Drift Wood Mounted on a Stand 1413";
textCaption[6]= "Drift Wood Mounted on a Stand 1414";
textCaption[7]= "Drift Wood Mounted on a Stand 1415";
textCaption[8]= "Drift Wood Mounted on a Stand 1413";
textCaption[9]= "Drift Wood Mounted on a Stand 1414";
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
var current = 0;
var caption = "";
function next(){
if (current < group1.length-1)
{
current++;
}
else {
current = 0;
}
document.images.show.src = group1[current]
caption.innerHTML = textCaption[current];
}
function gal1() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
caption.innerHTML = current;
}
function gal2() {
current = 9;
document.images.show.src = document.slideform.slide[9].value;
document.slideform.slide.selectedIndex = 9;
caption.innerHTML = current;
}
function gal3() {
current = 18;
document.images.show.src = document.slideform.slide[18].value;
document.slideform.slide.selectedIndex = 18;
caption.innerHTML = current;
}
function gal4() {
current = 27;
document.images.show.src = document.slideform.slide[27].value;
document.slideform.slide.selectedIndex = 27;
caption.innerHTML = current;
}
function gal5() {
current = 36;
document.images.show.src = document.slideform.slide[36].value;
document.slideform.slide.selectedIndex = 36;
caption.innerHTML = current;
}
function gal6() {
current = 45;
document.images.show.src = document.slideform.slide[45].value;
document.slideform.slide.selectedIndex = 45;
caption.innerHTML = current;
}
function gal7() {
current = 54;
document.images.show.src = document.slideform.slide[54].value;
document.slideform.slide.selectedIndex = 54;
caption.innerHTML = current;
}
function gal8() {
current = 63;
document.images.show.src = document.slideform.slide[63].value;
document.slideform.slide.selectedIndex = 63;
caption.innerHTML = current;
}
function gal9() {
current = 72;
document.images.show.src = document.slideform.slide[72].value;
document.slideform.slide.selectedIndex = 72;
caption.innerHTML = current;
}
function previous(){
if (current > 0)
{
current--;
}
else {
current = group1.length-1;
}
document.images.show.src = group1[current];
caption.innerHTML = textCaption[current];
}
function ap(text) {
document.forms[0].slidebutton.value = (text == "Stop") ? "AutoPlay" : "Stop";
rotate();
}
function rotate(){
if (document.forms[0].slidebutton.value == "Stop")
{
current = (current == group1.length-1) ? 0 : current+1;
document.images.show.src = group1[current];
caption.innerHTML = textCaption[current];
setTimeout("rotate()", rotate_delay);
}
}
function init(){
caption = document.getElementById('description');
caption.innerHTML = textCaption[0];
}
onload=init;
</script>
</head>
<BODY BGCOLOR="#2D2D4A" TEXT="#FFFFFF" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" link="#ffffff" vlink="#fffffff" alink="#ffffff">
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td align="center" valign="middle">
<form name="slideform" style="margin: 0px">
<!-- Grouping #1 -->
<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center" valign="middle">
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#1F3564" style="border-collapse: collapse">
<tr>
<td><img src="PopUps-driftwoodbowlstand/driftwoodbowlstand-100_3428.jpg" name="show">
</td>
</tr>
<tr>
<td style="font-size:10pt;color:darkblue;background-color:#808080;padding:5px" align="middle" id="description">
</td>
</tr>
</table>
<br>
<!-- START THE SLIDESHOW BUTTONS -->
<input type=button value="Close" onClick='self.close()' class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
<input type=button name="slidebutton" onClick="ap(this.value);" value="AutoPlay" title="AutoPlay" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
<input type=button onClick="previous();" value="<<" title="Previous" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
<input type=button onClick="next();" value=">>" title="Next" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
</td>
</tr>
</table>
</form>
<br>
<br>
<div align="center"><span class="message"><p>A complete listing of descriptions and prices may be found for these presented products by clicking <a href="#">here.</span></a></p></div>
</td></tr></table>
</BODY>
</HTML>
04-20-2006, 01:08 AM
Linear Mode
