скрипт поворота изображения

Question

Так что у меня есть этот скрипт, который будет вращать изображения, расположенные в каталоге, который прекрасно работает. Однако для поворота изображения требуется обновление страницы. Есть ли способ, которым я могу изменить это, чтобы он поворачивал изображение при нажатии на само изображение? Заранее спасибо

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]);
?>

Answer 1

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

Просто объедините ваши $ файлы в кавычки, разделенные запятыми, и вставьте их в качестве значения для массива file_names выше.

Answer 2

Обновление: это очень просто, но протестируйте его и посмотрите, работает ли оно;

 <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)" />

и в вашем php добавьте заголовок контента для отправки изображения, например, если это gif или 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

    ?>

Идеей является установка типа контента header и чтение и запись файла в выходной буфер, используя readfile, вооружившись этим, вы можете использовать ajax в качестве другого средства для запроса изображения и использовать status легко отображать индикатор загрузки.

Если вы хотите переписать URL, вы можете изменить расширение .php для src или даже не иметь расширения.

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

с помощью pathinfo 'extension' вы можете получить расширение, а затем установить аппрейт Content-type

Answer 3

Вы смотрели на это с помощью ajax?Таким образом, вы можете запустить PHP, а затем обновить изображение, но не остальную часть страницы.

Answer 4

Вы можете добавить IFRAME, а затем с помощью javascript обновить этот кадр случайным образом

Answer 5

Если вы не хотите на стороне клиента, я бы добавил ссылку вокруг вашего IMG-тега и разделил ваш PHP-скрипт на два файла.

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

Файл 1 (rotate.php): вращает изображения

Файл 2 (random.php): Перенаправляет на случайное изображение

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