slideshow

[webgod]

Hi..

I have seen many ideas on how to make a slide show form a directory of images wih a previous/next button...

However, I want to make one that auto rotates every two seconds. It should be able to be placed on a page and only update the image, not the page itself..

any ideas?

[eoghain]

Find a good javascript site. You can't do this with PHP. You can make a slide show that updates the entire page using the refresh tag, but you can't just update 1 picture.

[webgod]

I have looked into javascript.. there are ALOT of scripts out there that does this.. however, all require you to "hardcode" the image names in the javascript tags.

So, then the quesiton is can Javascript read a directory of images and put the names into an array...

Or, can php be used to do this and pass these values to javascript?

[eoghain]

Just use PHP to build the javascript list of files. You can hardcode the javascript code to display the images, but have the array of images (or whatever javascript is using) built by your php script that is building the rest of your page.

[webgod]

Ok... here is where I'm a bit confused... and that is printing out the php array to the javascript array.

I know to get the list of files into an array from a directory with PHP, I would do this:

<?php
$handle = opendir('images/rand_front/');
while ($file = readdir($handle)) {
	if ($file == "." || $file == "..") {
		} else {
	$files[] = $file;
	}
}
closedir($handle);
?> 

Then the slideshow is this:

<SCRIPT LANGUAGE="JavaScript">
<!--

//set image paths
src = ["images/rand_front/ph_bandung_11.jpg", "images/rand_front/ph_bandung_front.jpg"]

//set duration for each image
duration = 4;

ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>

<IMG NAME="Ad_Image" SRC="images/rand_front/ph_bandung_11.jpg" BORDER=0>

[webgod]

Almost...

Here is what I got so far, the values are sepperated by a comma and a space. the problem is that i need to make it not add the last comma and space:

src = ["ph_bandung_front.jpg, ph_bandung_10.jpg, ph_bandung_11.jpg, "]

<?php
$handle = opendir('images/rand_front/');
while ($file = readdir($handle)) {
	if ($file == "." || $file == "..") {
		} else {
	$files[] = $file;
	}
}
closedir($handle);
?>
src = ["<?php foreach($files as $image) { echo $image.', '; } ?>"]

[eoghain]

Ok this is a standard pattern that you will run into many times. Here is a good solution.

<?php
   $handle = opendir('images/rand_front/');
   $src = "src = [";
   $sep = "";
   while ($file = readdir($handle)) {
      if ($file == "." || $file == "..") {
      }
      else {
         $src .= $sep . $file;
         $sep = ", ";
// No need for the array now.
// The $sep variable starts empty and only get's added for eact
// entry after the first.
//         $files[] = $file;
      }
   }

   closedir($handle);

   echo $src . "]";
?>