Ajax slideshow does not show anything

Question

Hi i'm using this code to fetch new images from a folder to populate an slideshow.

after each cycle ajax should check content of the folder to see if any there was any

changes(pictures added or removed) then on the next cycle it should make the new changes to

the slideshow

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

</body>



</html>

<script>
    $(function(){
        window.onload("fetchImages()", 2);

        function fetchImages() {
            $.ajax({
                type: "GET",
                url: "load.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>

and content of php:

<?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();
    foreach($images as $img)
    {
      echo json_encode($images);
    }

   ?>

Maybe this line `$('#slideshow').append('');` – JFK Apr 13 '12 at 04:57 — JFK, Apr 13 '12 at 04:57

score 2 · Accepted Answer · answered Apr 13 '12 at 16:47

Change your PHP to:

<?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();
echo json_encode($images);

?>

and your HTML to:

<html>
  <head>
    <meta http-equiv="refresh" content="1000"/>
    <title>Slideshow</title>
    <style type="text/css">
      #slideshow {
        position: relative;
      }
      #slideshow,
      #slideshow img {
        position: absolute;
        top: 0px;
        left: 0px;
        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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

    <script type="text/javascript">
      function loadSlides() {
        $.ajax({
          type: "GET",
          url: "load.php"
        }).done(function(response) {
          var temp_images = eval("(" + response + ")");
          for(ti in temp_images)
          {
            //alert(temp_images[ti]);
            $('#slideshow').append('<img src="images/' + temp_images[ti] + '" alt="">');
          }
          startSlideshow();
        });
      }

      function startSlideshow()
      {
        $('#slideshow').cycle({
          fx: 'fade',
          speed: 700,
          timeout: 800
        });
      }

      $(document).ready(function(){
        loadSlides();
      });
    </script>
  </head>
  <body>
    <div id="slideshow" />
  </body>
</html>

techguy817 · Answer 2 · 2012-08-21T03:55:10.003

0

I'm testing this code and it works fine but why the refresh meta tag? Isn't the point of AJAX to prevent this from happening and make it dynamic? Also, the biggest problem is that you need to set a meta refresh time that is not too long such that images don't take too long to reflect when added or deleted and not too short to prevent some images from showing at all (inevitable at some point).

edited Aug 21 '12 at 03:55

answered Aug 21 '12 at 03:40

techguy817

31
1
5

Ajax slideshow does not show anything

2 Answers2

Linked