Building a Slide Show with jQuery

In case you haven't had the chance to work with the jQuery library yet, let me tell you that its Ajax module includes three primary methods, which can be used for triggering HTTP requests to a web server.

The first two of these methods are called "$.get" and "$.post" respectively, but in this  case I'm going to utilize only the third one, which in my personal opinion is the most complete of them. The method is question is named "$.ajax()" and it comes in handy for fetching files from a web server by means of a JavaScript requester object.

Now that you have a clearer idea of how this method works, let me show you how to use it to build a slide show. First, I need to define a JavaScript function that fetches different images from the web server, which will be displayed following a predefined sequence.

Based on this requirement, below I've included the definition of that specific function. Look at it, please:

$(document).ready(function(){

$.ajax({

url: 'getimage.php',

type: 'GET',

dataType: 'html',

timeout: 1000,

error: function(){

alert('Error loading image!');

},

success: function(image){

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

}

});

});

Regardless of the short signature of the previous function, it works like a charm, trust me. As shown above, once the whole web document finishes loading, the "$.ajax()" method will be invoked to fetch a file called "getimage.php" from the web server.

Obviously, this file will be responsible for retrieving each image that composes the slide show, and whose pertinent definition is listed below:

<?php

session_start();

if(!isset($_SESSION['image_id'])||$_SESSION['image_id']>2){

$_SESSION['image_id']=1;

}

else{

$_SESSION['image_id']++;

}

echo '<img src="img'.$_SESSION['image_id'].'.gif" width="300" height="200" />';

?>

If you're not familiar with PHP, don't worry, because the above script is very simple to grasp. In short, it will load a different image each time it's requested to do so via Ajax, in accordance with the value assigned to a session variable, which behaves like a simple counter.

So, the first time the previous PHP file is fetched, it will produce the following output:

<img src="img1.gif" width="300" height="200" />

Then, with subsequent requests, it will load a different image, as demonstrated below:

<img src="img2.gif" width="300" height="200" />

<img src="img3.gif" width="300" height="200" />

<img src="img10.gif" width="300" height="200" />

That's pretty easy to understand, isn't it? Now, by combining the JavaScript snippet listed previously with the functionality of the above PHP file, it's feasible to create a functional slide show, since each image fetched from the web server will be sent to the browser and displayed within a containing div.

However, the best way to see how this web application works is undoubtedly by putting all of its building blocks into one single file. In the upcoming section I will create this brand new file for you, so you can have the full source code at your disposal. 

Please, click on the link shown below and keep reading.