Finishing a Slide Show Application with jQuery

In the previous section, I explained that it was necessary to incorporate a simple JavaScript timer into the slide show built previously. This would provide the application with the capability to fetch automatically all of the images stored on the web server to be displayed later on the browser using a determined sequence.

To be frank, implementing this basic timer is a straightforward process that you'll certainly grasp very quickly. If you take a close look at the following JavaScript snippet, then you’ll realize how the slide show is now capable of automating the retrieval of images from the web server:

$(document).ready(getImage());

function getImage(){

$.ajax({

url: 'getimage.php',

type: 'GET',

dataType: 'html',

timeout: 1000,

error: function(){

alert('Error loading image!');

},

success: function(image){

$("#container").html(image);

}

});

setTimeout("getImage()",3000*1);

}

As demonstrated by the above code sample, I used the JavaScript “setTimeout()” method to automatically fetch a new image from the server every three seconds. Obviously, this parameter is completely customizable, and you should use the value that best fits your personal needs.

So, in summary, with the incorporation of this simple JavaScript timer, now the slide show is capable of displaying automatically different images on the browser via Ajax. In other words, at this point, this web application has the expected behavior.

However, there are a couple of additional steps that must be taken to finish developing this Ajax-driven slide show. Naturally, the first one consists of linking the JavaScript code that you saw before to the application’s structural markup, and the second one requires the creation of a few sample images that can be used to demonstrate in a nutshell how the slide show functions.

Therefore, in the following section, I’ll be showing you how to accomplish these tasks with minor hassles, thus completing the creation of this basic slide show using the jQuery library.

So, what are you waiting for? Click on the link that appears below and read the next few lines!