Ajaxのコールは私がするたびに、すべての画像が</p> <p>が示された後、アヤックスは/画像の中に見えるように私のPHPをトリガするような方法でAJAX呼び出しを追加する次のコードでは、新しいデータ

をフェッチしますフォルダに新しいファイルがあるかどうかを確認します。Ajaxのコールは私がするたびに、すべての画像が</p> <p>が示された後、アヤックスは/画像の中に見えるように私のPHPをトリガするような方法でAJAX呼び出しを追加する次のコードでは、新しいデータ

新しいファイルがある場合は、次のサイクルで追加して表示する必要があります。

<html> 
<meta http-equiv="refresh" content="1000"/> 
<head> 
<title>Slideshow</title> 
<style type="text/css"> 
    #slideshow 
    #slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
    #slide {width: 370px; height: 220px; padding: 0; margin: 0 auto; } 

    #myslides { 
    width: 370px; 
    height: 220px; 
    padding: 0; 
    margin: 0 auto; 
} 

#myslides img { 
    padding: 10px; 
    border: 1px solid rgb(100,100,100); 
    background-color: rgb(230,230,230); 
    width: 350px; 
    height: 200px; 
    top: 0; 
    left: 0 
} 

</style> 
</head> 
<!-- include jQuery library --> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#slideshow').cycle({ 
       fx: 'fade', 
       speed: 700, 
       timeout: 8000 
     }); 
}); 
</script> 

<body> 

<div id="slideshow"> 

<?php 

    function returnimages($dirname="./images") { 
     $pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)";  
     $files = array(); 
     if($handle = opendir($dirname)) { 
      while(false !== ($file = readdir($handle))){ 
       if(preg_match($pattern, $file)){ //if this file is a valid image 
        $files[] = $file; 
       } 
      } 

      closedir($handle); 
     } 
     //sort($files);   
     natcasesort($files); 

     return($files); 
    } 

    $images = returnimages(); //will get the array containing the images 
    foreach($images as $img) 
    { 
     echo '<img src="images/' . $img . '" />'; 
    } 
?> 

</body>

出典

2012-04-12 user1325414

良い。非常に有用ではなかったhttp://api.jquery.com/category/ajax/ – Michelle

を読んでください。 – user1325414

jQuery Cycleは最後にイベントがありませんので、可能にするために何らかの種類のハックや拡張が必要なようです。 ajax呼び出し自体は簡単ですが、スライドショーIDとページ上の負荷を使用してください。 –

特定intervallsで新しいイメージのための要求を送信し、あなたのフッターにJavaScriptを追加します。

<script> 
    $(function(){ 
     setIntervall("fetchImages()", 20000); 

     function fetchImages() { 
      $.ajax({ 
       type: "GET", 
       url: "yourImageFetchingScript.php" 
      }).done(function(response){ 
       var curImgCount = $('#slideshow img').length; 
       if (response.length > curImgCount) { 
        for (var i = curImgCount; i < response.length; i++) { 
         $('#slideshow').append('<img src="images/' + response[i] + '"');  
        } 
       } 
      }); 
     } 
    }); 
</script>

その後yourImageFetchingScript.phpはちょうどその結果、あなたのreturnimages機能とJSONエンコードを呼び出すことができます：

$images = returnimages(); 
echo json_encode($images);

詳細については、jQueryのajax documentationを参照してください。

出典

2012-04-12 23:48:28 p3n0l

Opppsは...そこにあなたのサイクルを逃しました。サイクリングによってトリガーされたものも、setIntervall関数の代わりにfetchImageを呼び出すために使用します。 – p3n0l

あなたはより明確になることができますか？ – user1325414

Ajaxのコールは私がするたびに、すべての画像が</p> <p>が示された後、アヤックスは/画像の中に見えるように私のPHPをトリガするような方法でAJAX呼び出しを追加する次のコードでは、新しいデータ

答えて

関連する問題