Javascript and PHP Pause Feature?

A

Alex

New member
I made a slideshow in Javascript that gets its images from an external PHP file, which gathers all of the images in a folder automatically. I need to know how to insert a pause/play button. It needs to hold its place in the slideshow though. I am a beginner at this so sorry if its an easy solution. I have been searching and searching but can't find a solution.

My Code for the PHP file is:
<?php
ob_start(); //Output buffering
//first we send the header to the browser to process the page
//as JavaScript
header("content-type: application/x-javascript");
$imgDir = "images/"; // the directory the iimages reside in
$counter = 0; // our file counter;
$list = "";

//regex pattern to check file extensions
$pattern="(.jpg$)|(.gif$)";

//read through the dir and create the img list
if($dir = opendir($imgDir)) {
while(false !== ($file = readdir($dir))){
if(eregi($pattern, $file)){
$path = $imgDir . $file;
$list .= 'images['.$counter.']="'.$path .'";' .chr(13);
$counter++;
}
}
closedir($dir);
}
//echo the array declaration
echo "var images = new Array()" . chr(13);
echo $list;
ob_end_flush();
?>

And for my HTML File:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Image List</title>
<!-- add reference to external file -->
<script language="JavaScript"
type="text/javascript" src="slideShow.php"></script>
<script language="JavaScript"
type="text/javascript">
var counter = 0;
var showImageFor = 3; //seconds

function showImage(){
if(counter == images.length){
counter = 0;
}
document.images.imageCotainer.src = images[counter];
counter++;
}

function runImages(){
milliseconds = showImageFor * 1000;
setInterval("showImage()", milliseconds);
}
</script>
</head>
<body onload="runImages()">
<img src="slideshow.php" name="imageContainer" id="imageContainer" >
</html>


It works fine, I just have NO idea how to insert pause/play buttons the script.
actually now i got the funtion to work but it just restarts the slideshow... i need it to pause on that specific frame
the clearTimeout function didn't work... it tried sending me to a url i think
 
try this, in your last function edit the last line to look liket his:

function runImages(){
milliseconds = showImageFor * 1000;
interval = setInterval("showImage()", milliseconds);
}

Then add another function like this:

function clearTimeout() {
clearInterval(showtime);
}

Then in your html add two links like this:

<a href="stop" onclick="clearTimeout();return false;">stop</a>
<a href="play" onclick="runImages();return false;">play</a>

I didn't test this, but should give you an idea of where to go.
 
Back
Top