jQuery: AJAX image slideshow

In this post I'm going to show you how to create an image slideshow where all the images are fetched via AJAX. To accomplish this, we'll create a PHP script that loops through all the images of a directory, stores them into an array, sorts this array by date and finally returns a JSON object. If you're not accustomed to PHP programming, don't worry: it's sufficient to say that the main work is done by the json_encode() function combined with the appropriate HTTP header (here set to application/json) and that the PHP script must be put in the same directory of your images. Said that, here's the core of our slideshow:

header('Content-Type: application/json');
$dir = opendir('.');
$jpeg_files = array();
$json_arr = array();
 
 while($fname = readdir($dir)) {
     
     if(preg_match('/[.]jpg$/', $fname)) {
         
         $jpeg_files[] = $fname;
         
     }
     
     
     
 }  
 
closedir($dir);

function sortByDate($a, $b)
 {
     
     $time1 = filectime($a);
     $time2 = filectime($b);
     
     return $time1 < $time2;
     
     
 }
 
usort($jpeg_files, 'sortByDate');

foreach($jpeg_files as $file) {

  $json_arr[] = $file;


}

echo json_encode(array('images'=>$json_arr));

This script returns the following JSON file:

{
  "images": ["image1.jpg", "image2.jpg", "imageN.jpg"]
}

As you can see, the JSON object contains only the images array. Now the first thing we have to do with jQuery is to fetch all the images contained within this array and populate our slideshow wrapper:

$(function() {

  $.getJSON('slideshow-dir/slideshow.php', function(json) {
  
    var images = json.images;
    var src = 'slideshow-dir/';
    var html = '';
    
    $.each(images, function(i, item) {
    
    
      html += '<img src="' + src + item + '"/>';
    
    
    });
    
    $('#slideshow-wrapper').html(html);
  
  
  });

  // code continues
});

Thanks to the $.getJSON() method we fetch our JSON file so that we can later loop through the images array and populate our slideshow with several img elements.

Now we have to animate the gallery. We can't run our animation until the AJAX request is fully completed and the DOM structure has been updated with the new content. For that reason, we use the jQuery ajaxComplete() global event to execute our code only when everything has been properly loaded:

// code continues

$('#slideshow-wrapper').ajaxComplete(function() {
  
    var wrapper = $(this);
    var len = wrapper.find('img').length;
    var counter = -1;
    
    var interval = setInterval(function() {
    
      counter++;
      
      if(counter == (len -1)) {
      
      
        counter = -1;
        
       
      
      
      }
    
      var img = wrapper.find('img').eq(counter);
      
      wrapper.animate({
        left: - img.position().left
      }, 1500);
         
    }, 1500);
    
  
  
});

Our code is a normal jQuery code used in all other similar image slideshows. The only difference here is that our main animation will run only when the AJAX request is complete. You can see the demo below.

Demo

Live demo