I have been trying to create a slideshow using PHP and JavaScript mainly. However, for some reason there is no response after I click >> or << to move to the next or previous slide.
The PHP script is mainly used to grab images from a folder and form them into an array. Then I use JavaScript within this PHP via echo to transform the PHP-array into a JavaScript-array.
I used this website as a tutorial.
Thanks for your help!
<?php
//PHP SCRIPT: getimages.php
//Header("content-type: text/javascript");
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname='C:\Apache\htdocs\Psych211LifespanDevchpt1') {
echo "in return images";
$files = array();
$curimage = 0;
if ($handles = opendir($dirname)) {
echo "in handles";
while (false !== ($file = readdir($handles))) {
echo "in while";
$path_info = $_FILES['file']['name'];
$extensions = pathinfo($path_info, PATHINFO_EXTENSION);
echo $extensions;
if ($extensions=='png')
//if(eregi($pattern, $file)) { //if this file is a valid image
//Output it as a JavaScript array element
//$files->append($file);
$files[$curimage] = $file;
array_push($files,$file);
//echo $files[$curimage];
// 'Slides['.$curimage.']="'.$file .'";';
//echo $curimage;
$curimage++;
//}
}
echo $curimage;
echo count($files);
closedir($handle);
}
echo '<html>
<head>
<script type="text/javascript">
var Slides = [];
Slides = '.json_encode($files).'; document.write(Slides.length);
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images["Screen"].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = "Picture " + (CurrentSlide+1) + "of " +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}
function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}
function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
"string"))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = "Downloading next picture...";
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}
function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
var SlideReady = true;
ShowSlide(1);
}
</script>
</head>
<body onLoad="StartSlideShow()">
<form name="SlideShow">
<table>
<tr>
<td colspan=2><img src="Psych211LifespanDevchpt1/slide-1.png" name="Screen" width=108 height=135></td>
</tr>
<tr>
<td><input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next" value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>
</body>
</html>';
//return($files);
}
//echo 'var Slides=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
