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;

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 + '"/>';

  // 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() {
      if(counter == (len -1)) {
        counter = -1;
      var img = wrapper.find('img').eq(counter);
        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.


Live demo

2 thoughts on “jQuery: AJAX image slideshow”

  1. Hi Steve,
    you should store in the DB (I assume MySQL) only the name of the file with its complete path. So you basically need this table (called images, for the sake of this example:

    img_id int(11) not_null auto_increment
    img_url varchar(100) not null
    primary key img_id

    Then you should loop through the $jpeg_files array and use an INSERT statement after assembling the full URL using a base path and the image
    name contained in that array:

    $query = "INSERT INTO images (img_url) VALUES ({$url})";

    HTH :-)

Leave a Reply

Note: Only a member of this blog may post a comment.