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> '
 ?>

@dayuloli If we didn't re-invent the wheel from time-to-time we'd still be travelling with horse and cart. Perhaps OP wants to make something and understand how/why it works? Perhaps it's a personal project and wants everything on it to be created by him/herself? — ʰᵈˑ
– ʰᵈˑ, Commented Mar 17, 2015 at 16:06
@ʰᵈˑ Thank you for the reminder, I did not consider that! Have edited it to reflect what you said. — dayuloli
– dayuloli, Commented Mar 17, 2015 at 16:07
If you just want something that works, consider using a library like slick or bxslider, which provides what you describe out of the box. — dayuloli
– dayuloli, Commented Mar 17, 2015 at 16:08
Internal server error you say? Sounds like a web server problem. Can you load any pages? — glend
– glend, Commented Mar 17, 2015 at 16:16
Look for a few set Timeout and change to setTimeout. (Remove the space.) — bloodyKnuckles
– bloodyKnuckles, Commented Mar 17, 2015 at 16:24

michele · Accepted Answer · 2015-03-18 13:43:15Z

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:

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).

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.

edited Mar 18, 2015 at 13:43

answered Mar 17, 2015 at 16:17

michele

1694 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Over a year ago

ok, sarcasm aside. I get the point, the question I should have asked was how to replicate that logic with image as a variable. Sounds like jquery it is. Any preferred method there, keep in mind, I'm a novice.

michele Over a year ago

My point was that your implementation is feasible, just your PHP syntax was not correct. I'll comment more on the options in the answer. No sarcasm anyway.

Brian Over a year ago

was referring to other comments as sarcastic, not yours. I changed a few things and it still didn't work. Seems like JQuery is better to use for what I'm trying to do. Just need to figure it out.

Collectives™ on Stack Overflow

Using PHP and JavaScript to display rotating images

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related