CODEWITHSUNDEEP
phpjavascripthtmlonclick
syllable3
syllable3

Reputation: 79

image rotation script

So I have this script that will rotate images located in a directory, which works great. However, it requires a refresh of the page in order to rotate the image. Is there a way I can modify this to have it rotate the image when the image itself is clicked? Thanks in advance

HTML:

<img src="rotate.php" alt="random image" />

PHP:

<?php
    $folder = 'images/';

    $exts = 'jpg jpeg png gif';

    $files = array(); $i = -1;
    if ('' == $folder) $folder = './';

    $handle = opendir($folder);
    $exts = explode(' ', $exts);
    while (false !== ($file = readdir($handle))) {
        foreach($exts as $ext) {
            if (preg_match('/\.'.$ext.'$/i', $file, $test)) {
                $files[] = $file;
                ++$i;
            }
        }
    }
    closedir($handle);
    mt_srand((double)microtime()*1000000);
    $rand = mt_rand(0, $i);

    header('Location: '.$folder.$files[$rand]);
?>

Upvotes: 0

Views: 3531

Answers (5)

Eystein Bye
Eystein Bye

Reputation: 5126

If you don't want to his client side then I would add a link round your IMG tag and split your PHP script into two files.

<a href="rotate.php"><img src="random.php" alt="random image" /></a>

File 1 (rotate.php): Rotates the images

File 2 (random.php): Redirects to the random image

header('Location: '.$folder.$files[$rand]);

Upvotes: 0

david
david

Reputation: 4278

Update: this is very basic but test it out and see if it works;

 <script>
  function changeImage(o){
   o.src = 'http://www.domain.com/testtest.php?' + (new Date()).getTime(); // time to help stop caching
    }
 </script>
 <img src="http://www.domain.com/testtest.php" onclick="changeImage(this)" />

and in your php add a content header to send the image eg if it is a gif or png...

 <?php
// see link at bottom for getting file extention

 switch ($selected_random_file_extention) {
  case "gif":
     header('Content-type: image/gif');
     $file_ext = "gif"; break;
   case "jpg":
     header('Content-type: image/jpg')
     $file_ext = "jpg"; break;
   case 3:
     header('Content-type: image/png');
     $file_ext = "png"; break;
  }

  //header('Content-type: image/gif'); // send as image 



   //$random_image_name = rand(1,5);

     // you would add $folder.$files[$rand]; and include you script above
     $random_image_name = $folder.$files[$rand]; 



                            // adjust paths as needed
       $img_file = "http://www.domain.com/".$random_image_name.".gif";
                                                               // .$file_ext;


   readfile($img_file);  // not sure how memory will go

    ?>

The idear is to set the header content type and to read and write the file to the output buffer using readfile, armed with this you could use ajax as another means to request the image and using the status to easly display a loading indicator.

If you where to Rewrite the URL you could change the extension of .php for the src or not even have an extention.

http://php.net/manual/en/function.pathinfo.php

using pathinfo 'extension' you can get the extention and then set the approprate Content-type

Upvotes: 1

Joseph Bui
Joseph Bui

Reputation: 1731

<script>
function changeSrc(element) {
  var file_names = ["image1.png", "image2.png", "image3.png"]; //etc
  var i = Math.floor(Math.random() * file_names.length);
  element.src = file_names[i];
}
</script>
<img src="image1.png" onclick="changeSrc(this)">

Just join your $files into a quoted comma separated string and insert that as the value for the file_names array above.

Upvotes: 1

Brid
Brid

Reputation: 181

Have you looked into doing this with ajax? This way you could trigger the PHP, then refresh the image, but not the rest of the page.

Upvotes: 0

Me Myself
Me Myself

Reputation: 129

You could add an IFRAME and then with javascript, refresh that frame randomly

Upvotes: 0

Related Questions