Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

javascript onClick for photo viewer

I found some code I need help with modifying.  It creates two arrays, one for pix and one for captions.  The method allows you to set a timer and the images scroll.  I have added two images I want to use to allow the user to scroll back and forth through the pix without it automatically advancing.  I need to figure out how to increment or decrement the for loop with, I assume, and onClick event on each one of my 'buttons' and completely remove the automated scroll effects.  I have attached the script and table I am using.

Thanks in advance.
<script>
		var SlideShowSpeed = 5000;
		var CrossFadeDuration = 3;
		var Picture = new Array(); 
		var Caption = new Array();
		
		Picture[1]  = '1.jpg';
		Picture[2]  = '3.jpg';
		Picture[3]  = '2.jpg';
		Picture[4]  = '4.jpg';
		
		Caption[1]  = "caption1.";
		Caption[2]  = "caption2";
		Caption[3]  = "caption3";
		Caption[4]  = "caption4";
		
		var tss;
		var iss;
		var jss = 1;
		var pss = Picture.length-1;
		
		var preLoad = new Array();
		for (iss = 1; iss < pss+1; iss++){
		preLoad[iss] = new Image();
		preLoad[iss].src = Picture[iss];}
 
		function runSlideShow(){
		if (document.all){
		document.images.PictureBox.style.filter="blendTrans(duration=2)";
		document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
		document.images.PictureBox.filters.blendTrans.Apply();}
		document.images.PictureBox.src = preLoad[jss].src;
		if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
		if (document.all) document.images.PictureBox.filters.blendTrans.Play();
		jss = jss + 1;
		if (jss > (pss)) jss=1;
		tss = setTimeout('runSlideShow()', SlideShowSpeed);
		}
		
		</script>
 
<body onload=runSlideShow() bgcolor=#FFFFFF>
<table border=0 cellpadding=0 cellspacing=0>
  <tr>
    <td>
    <img src=Image001.jpg name=PictureBox width=694 height=546>
    </td>
  </tr>
  <tr>
	<table width="694" border="0">
	  <tr>
		<td width="20" align="center"><img src="Images/TT/left.JPG" onClick="?????"></td>
		<td id=CaptionBox class=Caption width="654" align="justify">This is the default caption.</td>
		<td width="20" align="center"><img src="Images/TT/right.JPG"></td>
	  </tr>
	</table>
  </tr>
</table>

Open in new window

0
connect3
Asked:
connect3
1 Solution
 
Lolly-InkCommented:
This works in IE7:
<html>
<script>
      var SlideShowSpeed = 5000;
      var CrossFadeDuration = 3;
      var Picture = new Array(); 
      var Caption = new Array();
      
      Picture[1]  = '1.jpg';
      Picture[2]  = '3.jpg';
      Picture[3]  = '2.jpg';
      Picture[4]  = '4.jpg';
      
      Caption[1]  = "caption1.";
      Caption[2]  = "caption2";
      Caption[3]  = "caption3";
      Caption[4]  = "caption4";
      
      var stopSlideShow = false;
      var tss;
      var iss;
      var jss = 1;
      var pss = Picture.length-1;
      
      var preLoad = new Array();
      for (iss = 1; iss < pss+1; iss++){
      preLoad[iss] = new Image();
      preLoad[iss].src = Picture[iss];}
 
      function runSlideShow()
      {
         if (stopSlideShow) return;
         showPicture();
         jss = jss + 1;
         if (jss > (pss)) jss=1;
         tss = setTimeout('runSlideShow()', SlideShowSpeed);
      }
 
      function go(index)
      {
         jss += index - (stopSlideShow ? 0 : 1);
         stopSlideShow = true;
         if (jss > pss) jss=1;
         if (jss < 1) jss=pss;
         showPicture();
      }
 
      function showPicture()
      {
         if (document.all)
         {
            document.images.PictureBox.style.filter="blendTrans(duration=2)";
            document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
            document.images.PictureBox.filters.blendTrans.Apply();
         }
         document.images.PictureBox.src = preLoad[jss].src;
         if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
         if (document.all) document.images.PictureBox.filters.blendTrans.Play();
      }
      </script>
 
<body onload=runSlideShow() bgcolor=#FFFFFF>
<table border=0 cellpadding=0 cellspacing=0>
  <tr>
    <td>
    <img src=Image001.jpg name=PictureBox width=694 height=546>
    </td>
  </tr>
  <tr>
   <table width="694" border="0">
     <tr>
      <td width="20" align="center"><img src="Images/TT/left.JPG" onClick="go(-1)"></td>
      <td id=CaptionBox class=Caption width="654" align="justify">This is the default caption.</td>
      <td width="20" align="center"><img src="Images/TT/right.JPG" onClick="go(1)"></td>
     </tr>
   </table>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
connect3Author Commented:
a thousand thank you's, excellent!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now