call php script from javascript

snorkytheweasel

I'm trying to get a page to display a series of images, one at a time, and changing the display every n seconds.

I wrote a php routine "rotatepix.php." Using that script I can open the directory and randomly select and display an image. However, php stops as soon as the page is loaded. With each refresh (or opening) of the page, a randomly-selected image displays.

But I want to have javascript take over and keep changing the images.

I think the approach is to use javascript's setInterval() to call the php script

function foo()
{
	var action;
	action="document.open('rotatepix.php')";
	setInterval(action, 500);
}

foo();

and then call that script from the web page. With that I don't get any errors, but I also don't get any results.

As you can see, my js skills suck.

I've looked at some "rotating banners" code, but none seem to fit what I need.

Some notes:

all of the images are in the same directory
all of the server side action takes place on the same server, and that server supports php
the rotatepix.php mentioned above works within PHP's limitations

Can someone get me on the right track? I'd be happy to omit the php if there's a simple js that will accomplish the same goal: pictures selected at random, displayed, and display changed every n seconds

reddrum

I made this template for my wife to use on her website. You should be able to modify it to do what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <script type="text/javascript" language="javascript">
   <!--
   var photoName = new Array("light.gif", "light2.gif");        // Add image names here
   var i = 0;
   var n = photoName.length - 1;
   var delay = 2000;                                          // Change for time delay 1000 = 1 sec.
   var maxRun = 20;                                           // Change number of times image will change
   var runNumber = 0;

   function change_photo(){
     document.images['main'].src = photoName[i];               // The name of the image tag
     if(i<n)
        ++i;
     else
        i=0;

 setPhotoChange(photoName[i]);

   }

   function setPhotoChange(photoName){
      if(maxRun > runNumber){
         setTimeout('change_photo()', delay);
         ++runNumber;
     }
   }

   function stop_start_photos(){

  if(maxRun > runNumber){
     runNumber = maxRun + 1;
  }
  else{
     maxRun = 20;
     runNumber = 0;
     setPhotoChange(photoName[i]);
  }

   }
   -->
   </script>
</head>

<body>
<img name="main" src="light2.gif" width="211" height="200" onclick="javascript: stop_start_photos();" /><br /><br /><br />

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

   setPhotoChange(photoName[i]);

/*]]>*/
</script>
</body>

</html>