Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Numbering system for a dynamic slideshow

Status
Not open for further replies.
mperez5

mperez5

Programmer
Nov 17, 2002
15
US
Hello everyone,
I have three rotating images and I like to have numbers under the image example 1 2 3 that rotates as the image changes. An example is:
So far I am able to show the corresponding slide number, my problem is to show the other two numbers. Any clue is greatly apprecitated. Thanks mperez5

Code: 
<script>
var my_Dir = new Array();
var martin_message = new Array();
martin_message[1]  = "Description of my first image";
martin_message[2]  = "Second image description"; 
martin_message[3]  = "The prev from the last image description";

var martin_counter = new Array();
martin_counter[1]  = "1";
martin_counter[2]  = "2"; 
martin_counter[3]  = "3";

url=new Array();
url[1]="[URL unfurl="true"]http://www.yahoo.com";[/URL]
url[2]="[URL unfurl="true"]http://www.google.com";[/URL]
url[3]="[URL unfurl="true"]http://www.tek-tips.com";[/URL]

var my_images = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_actual = 1;
var SLIDE_speed = 2000;
var SLIDE_fade = 2;
for (my_Dir = 1; my_Dir <= martin_message.length-1; my_Dir++)
{
  my_images[my_Dir] = 'images2/'+ my_Dir + '.jpg';
  SLIDE_load[my_Dir] = new Image();
  SLIDE_load[my_Dir].src = my_images[my_Dir];
}

for (my_Dir = 1; my_Dir <= martin_counter.length-1; my_Dir++)
{
}
var SLIDE_count = my_images.length-1;

function SLIDE_start()
{
  document.getElementById('SLIDE_play').disabled = false;
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  document.getElementById("SLIDE_counter").innerHTML= martin_counter[SLIDE_actual];
  
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_actual++;
  SLIDE_slide();
  SLIDE_status = 'SLIDE_play';
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_pause()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_status = 'SLIDE_pause';
  document.getElementById('SLIDE_pause').disabled = true;
  document.getElementById('SLIDE_play').disabled = false; 
}
function SLIDE_back()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_forward()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual++;
  SLIDE_slide()
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
  if (SLIDE_status != 'SLIDE_pause')
  {
    document.getElementById('SLIDE_play').disabled = true;
    document.getElementById('SLIDE_pause').disabled = false;
  }
  if (SLIDE_actual > (SLIDE_count)) SLIDE_actual= 1;
  if (SLIDE_actual < 1) SLIDE_actual = SLIDE_count;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_picBox.filters.blendTrans.Apply();
  }
    document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  if (document.getElementById) document.getElementById("SLIDE_counter").innerHTML= martin_counter[SLIDE_actual]; 
  if (document.all) document.images.SLIDE_picBox.filters.blendTrans.Play();
}
function SLIDE_speeds(SLIDE_valgt)
{
  SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
function newpage() {
window.location.href=url[SLIDE_actual];
}
function newpageRelease() {
window.location.href=url[SLIDE_actual];
}
</script>
</head>
<body bgcolor="#000000" onload="SLIDE_start();">
<center>
<table width="200" border="1">
  <tr>
    <td><img name="SLIDE_picBox" border="0"><font color="#FFFFFF"></td>
  </tr>
  <tr>
    <td height="50">
	<a href="javascript:newpage()"><font color="#FFFFFF"><b><div id="SLIDE_textBox2"></div></b></font></a>
	<font color="#FFFFFF"><b><div id="SLIDE_textBox"></div></b></font><br />
	<a href="javascript:newpage()"><font color="#FFFFFF"><b><div id="SLIDE_counter"></div></b></font></a><br />	
	</td>
  </tr>
  <tr>
    <td><center>
        <button type="button" id="SLIDE_back" onclick="SLIDE_back()"> < </button>
        <button type="button" id="SLIDE_play" onclick="SLIDE_play()"> p </button>
        <button type="button" id="SLIDE_pause" onclick="SLIDE_pause()"> || </button>
        <button type="button" id="SLIDE_forward" onclick="SLIDE_forward()"> > </button><br />
        </center> </td>
  </tr>
</table>
</center>
</body>
</html>
 
Sort by date Sort by votes
how about defining the counter like so...
Code: 
var martin_counter = new Array();
martin_counter[1]  = "[1] 2 3";
martin_counter[2]  = "1 [2] 3"; 
martin_counter[3]  = "1 2 [3]";

so the square bracket indicates current slide while showing the other numbers.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
or as you are updating the inter.html and can use HTML
Code: 
var martin_counter = new Array();
martin_counter[1]  = "<u>1</u> 2 3";
martin_counter[2]  = "1 <u>2</u> 3"; 
martin_counter[3]  = "1 2 <u>3</u>";
so current slide shows as underlined... just some ideas



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
682
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
255
Rayj0000
Rayj0000
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
299
malpa
malpa
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
87
amrmnabil
amrmnabil
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
454
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top