?
Solved

javascript onClick for photo viewer

Posted on 2008-10-22
2
Medium Priority
?
333 Views
Last Modified: 2012-06-21
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
Comment
Question by:connect3
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 16

Accepted Solution

by:
Lolly-Ink earned 2000 total points
ID: 22783139
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
 

Author Closing Comment

by:connect3
ID: 31509054
a thousand thank you's, excellent!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question