Solved

javascript onClick for photo viewer

Posted on 2008-10-22
2
327 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
2 Comments
 
LVL 16

Accepted Solution

by:
Lolly-Ink earned 500 total points
Comment Utility
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
Comment Utility
a thousand thank you's, excellent!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now