JAVASCRIPT

Finishing a Slide Show Application with jQuery

In the preceding article of this series, I demonstrated how to take advantage of the jQuery JavaScript library's functionality to develop a simple slide show, which used the Ajax module bundled with jQuery as its driving engine. In this part, we'll finish the application.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

October 16, 2009

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

Finishing a Slide Show Application with jQuery - Listing the application’s complete source code
(Page 4 of 4 )

In the course of the previous section, I showed you how to add a basic timer to the existing JavaScript code of this Ajax-based slide show, with the purpose of providing it with the capacity to automatically fetch each image from the web server. In doing this, this web application now works correctly, and best of all, it’s only comprised of two simple source files!

And speaking of source files, assuming that you already grasped how the slide shows does its thing, below I listed the complete signature corresponding to each of them, naturally including the JavaScript timer that I created in the prior section. Here they are:

(definition of 'slide_show.htm' file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Slide show using $.ajax() method</title>

$(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);

}

</script>

body{

margin: 0;

padding: 0;

background: #eee;

}

h1{

text-align: center;

font: bold 24px Arial, Helvetica, sans-serif;

color: #000;

}

#container{

text-align: center;

width: 300px;

height: 200px;

margin-left: auto;

margin-right: auto;

background: #fff;

border: 1px solid #000;

}

#container img{

border: none;

}

</style>

</head>

<body>

</body>

<h1>Slide show using $.ajax() method</h1>

</div>

</html>

(definition of 'getimage.php' file)

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

Thanks to the functionality of the jQuery library, building a simple slide show like the one shown above only requires a couple of source files. In this specific case, the first of these files, called “slide_show.htm,” is responsible for retrieving a bunch of images from the web server via Ajax, while the second one, named “getimage.php,” is charged simply with sending the HTML code of the images in question to the client. Not too hard to understand, right?

If you’re interested in trying out this Ajax-based application with your own machine, you may want to use the following sample images for testing purposes. Here they are:

Now that you have at your disposal the three images shown above, feel free to use them if you wish to test this Ajax-based slide show using your own web server. And finally, don’t forget to download jQuery’s source file from its official web site, at: http://jquery.com. It’s going to be a fun and educational experience, trust me!

Final thoughts

Sad but true, we’ve come to the end of this series. The journey has been pretty instructive, since you learned how to use the handy “$.ajax()” method bundled with the jQuery to develop a simple Ajax-driven slide show.

As you saw earlier, the logic that drives this particular web application is actually simple to follow, and should give you a clear idea of how to use the Ajax module of jQuery in all sorts of clever ways.

See you in the next web development tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.