Using PHP and JavaScript to display rotating images

Question

What i'm trying to do is do display images from a directory and rotate every x seconds, in this case 2 seconds.

I wrote this java script code and it works great but the image names are hard coded.

<script language="javascript" type="text/javascript"> 
  img2 = new Image() 
  seconds = "2"; 
  function imgOne() 
  { 
    setTimeout("imgTwo()", seconds * 1000); 
  } 
  function imgTwo() 
  { 
    document.myimg.src = "pics/WM/IMAGE02"; 
    setTimeout("imgThree()", seconds * 1000); 
  } 
  function imgThree() 
  { 
    document.myimg.src = "pics/WM/IMAGE01"; 
    setTimeout("imgOne()", seconds * 1000); 
  } 

So I'm trying to use PHP to read the directory and create the javascript but am getting an internal server error. I'm using $p so it's img1 instead of imgOne so I can increase it. It loops thru and after the end loops back to 1. Any help is appreciated.

<?php
  $files = glob('pics/WM/*.jpg');
  echo 
  '
   <script language="javascript" type="text/javascript"> 
   img2 = new Image() 
   seconds = "2"; 

 function img1()
 {
    setTimeout("img2()"), seconds * 1000);
     }
 '
   $p=2; 
   for ($i=0; $i < count($files) $i++)
   { 
      $image=$files[$i];
      echo 'function img' .$p . '()'
  echo '{'
      echo 'document.myimg.src = "' .$image . '";'
  $p++;
      echo 'set Timeout(img"' .$p . '()", seconds * 1000); '
  echo '}'
   }

   echo 'function img' .$p . '()' 
   echo '         
   {
     document.img src="IMAGE01";
     set Timeout("img1()", seconds * 1000);
 }
 </script> '
 ?>  

Answer 1

the echostatements in your php scripts are missing the final ;. This should be the problem that causes the internal server error.

How to fix your implementation:

You should write something like

// using multiple echo statements
echo "..... your string ... ";
echo $p;
echo "--- something else ----";

// or you can concatenate strings with .
echo ".... your string ... " . $p . "---- something else ----";

Similar but safer and clearer PHP implementation:

Printing out Javascript code via PHP could be error prone, therefore I would recommend to use output big parts of text outside PHP code, like this

 Some text where p = <?php echo $p; ?> is printed out.

How to improve the Javascript part:

1. Load all images at once

This is not related on the specific question, but simplifies your solution. Regarding your own project (rotating images), as suggested in the comments there are many reusable javascript components you can use (firstly using some javascript libraries, e.g. jQuery). But if you want to develop this feature by yourself, keep in mind that changing the src attribute of an image tells the browser to download it from scratch, resulting in glitches. To solve this issue, you may insert many <img> elements and than display it one at the time (using css styling directives).

2. Iterate over the images using one timed function

Furthermore, you could simplify your javascript code: instead of using a different function to display each image you can use global variables (i.e. window.my_rotate_current_img_id) or better clojures to select and show the current image:

// 1. Declare an array of img tags ID, identifying the different images
// Note that we are using PHP to generate the array - the implode function
// concatenates array items into a string separated by the first argument 
// given
var images = [<?php echo '"' . implode('","', $images) . '"'; ?>];

// 2. Define a function that shows the correct image
function hide_first_and_show_second(first, second){ ... }

// img_num is the number of images to rotate
var update_img = function(idx){
    return function(){
        hide_idx = idx;
        show_idx = (idx + 1) % img_num;
        hide_first_and_show_second(hide_idx, show_idx);
    }
};
setInterval(update_img(0), 1000);

This are possible (and useful) improvements of your solution for this problem. Hope i clarified.