2 Replies - 1696 Views - Last Post: 02 January 2011 - 09:37 PM

#1 Guest_Anon*


Reputation:

How do you add a start button to a javascript presentation?

Posted 02 January 2011 - 08:31 AM

I have a working code already. It already has a play and pause button, but I do not have a working start button (it has to play it from the very start).

Here is the code:
<html> 
	<head> 
		<script type="text/javascript">
		var interval = 500;
		var random_display = 0; 
		var number = 0; 					
		image = new Array(); 

		image[number++] = new imageItem("1.jpg");
		image[number++] = new imageItem("2.jpg");
		image[number++] = new imageItem("3.jpg");
		image[number++] = new imageItem("4.jpg");
		image[number++] = new imageItem("5.jpg");
		image[number++] = new imageItem("6.jpg");
		image[number++] = new imageItem("7.jpg");
		image[number++] = new imageItem("8.jpg");
		image[number++] = new imageItem("9.jpg");
		image[number++] = new imageItem("10.jpg");
		image[number++] = new imageItem("11.jpg");
		image[number++] = new imageItem("12.jpg");
		image[number++] = new imageItem("13.jpg");
		image[number++] = new imageItem("14.jpg");
		image[number++] = new imageItem("15.jpg");
		image[number++] = new imageItem("16.jpg");
		image[number++] = new imageItem("17.jpg");
		image[number++] = new imageItem("18.jpg");
		image[number++] = new imageItem("19.jpg");
		image[number++] = new imageItem("20.jpg");
		image[number++] = new imageItem("21.jpg");
		image[number++] = new imageItem("22.jpg");
		image[number++] = new imageItem("23.jpg");
		image[number++] = new imageItem("24.jpg");
		image[number++] = new imageItem("25.jpg");
		image[number++] = new imageItem("26.jpg");
		image[number++] = new imageItem("27.jpg");
		image[number++] = new imageItem("28.jpg");
		image[number++] = new imageItem("29.jpg");
		image[number++] = new imageItem("30.jpg");
		
		
		var total_number_of_images = image.length; 
		
		
		function imageItem(image_location) {
			this.image_item = new Image();
			this.image_item.src = image_location;
		}
		
		
		function get_ImageItemLocation(imageObj) {
			return(imageObj.image_item.src)
		}
		
	function randNum(x, y) {
			var range = y - x + 1;
			return Math.floor(Math.random() * range) + x;
		} 
		
		function getNextImage() {
			if (random_display) {
				number = randNum(0, total_number_of_images-1);
			}
			else {
				number = (number+1) % total_number_of_images;	
			}
		var new_image = get_ImageItemLocation(image[number]);
	
		return(new_image);
		}
		
		
		function getPrevImage() {
			number = (number-1) % total_number_of_images;
			var new_image = get_ImageItemLocation(image[number]);
			return(new_image);
		}
 
		function prevImage(place) {
			var new_image = getPrevImage();
			document[place].src = new_image;
		}
 
		function rotateImage(place) {
			var new_image = getNextImage();
			document[place].src = new_image;
			var recur_call = "rotateImage('"+place+"')";
			timerID = setTimeout(recur_call, interval);
		}
		</script> 
	</head> 
	<body> 
	<center>
		
		<img name="rImage" src="1.jpg"> 
		<br><br>
				
		<a href="#" onclick="rotateImage('rImage')"><img src="PLAY.png"></a>&nbsp;&nbsp;
		<a href="#" onclick="clearTimeout(timerID)"><img src="PAUSE.png"></a>&nbsp;&nbsp;
		<a href="#" onclick="document.rImage.src='1.jpg'; clearTimeout(timerID)"><img src="STOP.png"></a>
		
	</center>
	</body> 
</html> 



Thank you very much!

This post has been edited by macosxnerd101: 02 January 2011 - 09:45 AM
Reason for edit:: Please use code tags


Is This A Good Question/Topic? 0

Replies To: How do you add a start button to a javascript presentation?

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: How do you add a start button to a javascript presentation?

Posted 02 January 2011 - 06:43 PM

View PostAnon, on 02 January 2011 - 07:31 AM, said:

I have a working code already. It already has a play and pause button, but I do not have a working start button (it has to play it from the very start).

Here is the code:
...

<a href="#" onclick="rotateImage('rImage')"><img src="PLAY.png"></a>&nbsp;&nbsp;
<a href="#" onclick="clearTimeout(timerID)"><img src="PAUSE.png"></a>&nbsp;&nbsp;
<a href="#" onclick="document.rImage.src='1.jpg'; clearTimeout(timerID)"><img src="STOP.png"></a>

</center>
</body>
</html>
[/code]

Thank you very much!


The "Stop" button does the "Start" function you desire.
Just use JS to change the <img src="START.png"> if you have that image.

You could also change the "Start/Stop" src=xxx value depending upon whether or not the "Play" or "Pause" buttons have been clicked.

BTW: Where are your images located for testing purposes? (Play, Pause, Stop, 1.jpg - 30.jpg)

This post has been edited by JMRKER: 02 January 2011 - 07:44 PM

Was This Post Helpful? 0
  • +
  • -

#3 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: How do you add a start button to a javascript presentation?

Posted 02 January 2011 - 09:37 PM

Abbreviated version (with enhancements) of your script...
<html>
<head>
<script type="text/javascript">
// From: http://www.dreamincode.net/forums/topic/207954-how-do-you-add-a-start-button-to-a-javascript-presentation/

var timerID = null;
var interval = 500;
var random_display = 0;
var number = 0;
image = [];

// for (var i=1; i<=30; i++) { image[i] = i+'.jpg'; }  // for OP's images list
// following used for testing purposes --------------------------------------
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var i=0;
for (var r=1; r<=6; r++) {
  for (var c=1; c<=5; c++) {
    image[i++] = baseURL+r.toString()+c.toString()+'.jpg';
  }
}
// --------------------------------------------------------------------------

// Following function is not used in original code --- reason???
function getPrevImage() {
  number--;  if (number < 0) { number = image.length-1; }
  number = number % image.length; 
  showImage();
}

function getNextImage() {
  if (random_display) { number = Math.floor(Math.random()*image.length); }
                 else { number++; number = number % image.length; }
  showImage();                 
}

function showImage() { document.getElementById('rImage').src = image[number]; }

function setRandomize() {
  var sel = document.getElementById('CBox');
  if (sel.checked == false) { random_display = 1; } else { random_display = 0; }
}

function rotateImage() {
  getNextImage();
  var recur_call = "rotateImage()";
  timerID = setTimeout(recur_call, interval);
}

</script>
</head>
<body>
<center>
<input type="checkbox" id="CBox" onchange="setRandomize()"> Randomize
<br>
<img id="rImage" name="rImage" src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg">
<br><br>
<a href="#" onclick="rotateImage()"><img src="PLAY.png" alt="Play"></a>
&nbsp;&nbsp;
<a href="#" onclick="clearTimeout(timerID)"><img src="PAUSE.png" alt="Pause"></a>
<br><br>
<a href="#" onclick="clearTimeout(timerID);number=0;showImage()"><img src="First.png" alt="First"></a>
<a href="#" onclick="clearTimeout(timerID);getPrevImage()"><img src="Prev.png" alt="Prev"></a>
<a href="#" onclick="clearTimeout(timerID);getNextImage()"><img src="Next.png" alt="Next"></a>
<a href="#" onclick="clearTimeout(timerID);number=image.length-1;showImage()"><img src="Last.png" alt="Last"></a>
</center>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1