2011-11-14 105 views
0

所以我有這個腳本,將旋轉圖像位於一個目錄,這很好。但是,它需要刷新頁面才能旋轉圖像。有沒有一種方法可以修改它,讓它在圖像本身被點擊時旋轉圖像? 在此先感謝圖像旋轉腳本

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

也許使用JavaScript,因爲這是客戶端問題。 – FloydThreepwood

+0

因此,PHP的工作正常?只是尋找一個瀏覽器解決方案? – Matthew

+0

@Matt我發佈的一切都很棒。我只是簡單地尋找一種方法將圖像顯示轉換爲onclick函數,以便點擊時可以從rotate.php中提取另一個圖像。 – syllable3

回答

1

更新:這是很基本的,但對其進行測試,看看它是否工作;

<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使用readfile將文件寫入輸出緩衝區,使用此功能,您可以使用ajax作爲請求圖像的另一種方法,並使用status輕鬆顯示加載指示符。

如果您在哪裏重寫URL,您可以更改.rcp的src擴展名,甚至不需要擴展。

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

使用pathinfo 'extension'你可以得到進一步擴展,然後設置 approprate Content-type

+0

我見過列舉圖像的java示例,但是,有超過20000個圖像。我只能想象會有多慢。 – syllable3

+0

@ syllable3,這就是另一個問題了,那麼圖像名稱是否在可預測的命名模式中,如編號? – david

+0

否定。無論如何,它們都無法預測。有些包括間距,一些包括數字等。 – syllable3

0

如果你不想自己的客戶端,那麼我會添加一個鏈接圓你的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]); 
+0

我測試了這一點。首次加載頁面時,圖像被打破,點擊後,它會將實際圖像加載到網站。 (即,http://www.testsite.com/whateverimage.jpg)因此,完成後,用戶無法再次單擊該圖像旋轉到下一個。 – syllable3

0

您可以添加一個IFRAME,然後用javascript,隨機刷新該框架

+0

瀏覽器圖片緩存怎麼樣? – Matthew

+0

要改善此答案,請考慮添加示例代碼片段。 –

0

你看過這樣做與AJAX?這樣你可以觸發PHP,然後刷新圖像,但不是頁面的其餘部分。

+0

我沒有。不太熟悉ajax。 – syllable3

+0

如果你不介意使用像jQuery這樣的框架,Ajax的出奇的簡單。 (文檔:http://api.jquery.com/jQuery.ajax/) 類似的選擇是使用JavaScript來更新包含圖像的DIV的HTML,去除圖像標籤,並添加一個新的。 (儘管這可能不會持續刷新圖像。) – Brid

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數組的值即可。

+0

如果所有圖像都採用相同的命名格式,那麼這將起作用。目錄中還有超過20,000張圖片,我只能假設它會大大減緩整個過程。 – syllable3

+0

是否可以將var file_names更改爲目錄,以便它可以旋轉該目錄中的任何圖像? – syllable3

+0

這似乎是正確的想法。 基本上,由每個鏈接被點擊時附加的隨機數到查詢字符串改變用JavaScript src屬性。 這刷新圖像並防止緩存。 random image Matthew