Thursday 15 September 2011

Using PHP and JavaScript to display rotating images -


What am I trying to do to display images from a directory and to rotate every x second, In this case 2 seconds

I wrote this java script code and it works great but the name of the image is hard coded.

  & lt; Script language = "javascript" type = "text / javascript" & gt; Img2 = new image () seconds = "2"; Function imgOne () {setTimeout ("imgTwo ()", seconds * 1000); } Function imgTwo () {document.myimg.src = "pics / WM / IMAGE02"; SetTimeout ("IMGThri ()", second * 1000); } Function imgThree () {document.myimg.src = "pics / WM / IMAGE01"; SetTimeout ("IMGon ()", second * 1000); }  

So I am trying to use PHP to read the directory and create javascript but am receiving an internal server error. I'm using $ p so it's img1 rather than img1 so i'll extend it, it eventually leads to loop through loops and eventually leads to 1. Any help is appreciated.

  & lt ;? Php $ files = glob ('pics / wm / * .jpg'); Echo '& lt; Script language = "javascript" type = "text / javascript" & gt; Img2 = new image () seconds = "2"; Function img1 () {setTimeout ("img2 ()"), seconds * 1000); } '$ P = 2; ($ I = 0; $ i & lt; Count ($ files) $ i ++) {$ image = $ files [$ i]; Resonance 'function img' $ P '()' resonance '{' echo 'document. Myimg.src = "'. $ Image."' ';' $ P ++; echo set timeout (IMG "'. $ P.' ()", second * 1000); 'echo'} 'echo' function img '. $ P' () 'echo' {document.img Src = "IMAGE01"; Set timeout ("IMG1 ()", second * 1000);} ? '? & Gt;  

echo statements are unavailable in your php scripts

< Strong> How to fix your implementation:

You should write something

  // using multiple echo statements "..... String ... " Resonate; echo $ p; echo "--- some other ----"; // Or you can add the string together, echo ".... your string ...". $ P "--- - Something else ---- ";  Similar but safe and clear PHP implementation:   

Printing javascript code via PHP may be prone to error, therefore I recommend using it to have large sections of text outside the PHP code, like

  some text where p = & lt ;? Php echo $ p; ? & Gt;  

How to improve the JavaScript part:

  1. Load all images once

This is not related to a specific question, but simplifies your solution about your own project (rotating images), as suggested in the comments that you have many reusable Javascript components can be used (first some JavaScript Ibrerijh are using tools such as 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 in this issue To solve, you can use several element and display it at a time (using the CSS style instructions). Besides, you can make your javascript code easier: 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 to select and show the current image:

  // 1. IMG tags identifying the different images Announce an array of IDs // Note that we want to generate the array of PHP Ryog are - Inpolod function // array item Align separate string first argument / the var images = [[lt ;? Php echo '' '.' Implode ('","', $ Picture). ' '; ? & Gt;]; // 2. Define a function that shows the correct image function is the number of images to replace hide_first_and_show_second (first, second) {...} // img_num 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);  

There are potential (and useful) improvements to your solution for this problem. I hope that I clarify.


No comments:

Post a Comment