Ajax-Aufruf neue Daten

Im folgenden Code holen i einen Ajax-Aufruf in einer Art und Weise hinzugefügt werden soll, dass jedes Mal, nachdem alle Bilder habenAjax-Aufruf neue Daten

die Ajax meine php gezeigt, auslösen wird in die/Bilder zu sehen Ordner, um zu sehen, ob es irgendwelche neuen Dateien gibt.

Wenn neue Dateien vorhanden sind, sollten sie hinzugefügt und im nächsten Zyklus angezeigt werden.

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

Quelle

2012-04-12 user1325414

gut. Beginnen Sie lesen http://api.jquery.com/category/ajax/ – Michelle

das war nicht sehr hilfreich. – user1325414

jQuery Cycle hat kein Ereignis am Ende, also scheint es eine Art Hack oder Erweiterung zu benötigen, um das zu ermöglichen. Der Ajax-Aufruf selbst ist einfach, benutze einfach die Slideshow-ID und die Seite selbst. –

eine Javascript in Ihre Fußzeile hinzufügen, die mit bestimmten Abständen eine Anforderung für neue Bilder sendet:

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

Dann yourImageFetchingScript.php nur Ihre returnimages-Funktion und json encodieren das Ergebnis nennen könnte :

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

Check out jQuery ajax documentation für weitere Details.

Quelle

2012-04-12 23:48:28 p3n0l

Oppps ... verpasste Ihren Zyklus dort. Verwenden Sie einige sogar ausgelöst durch das Radfahren, um das fetchImage anstelle der setIntervall-Funktion aufzurufen. – p3n0l

können Sie klarer sein? – user1325414

Ajax-Aufruf neue Daten

Antwort

Verwandte Themen