Building a Slide Show with jQuery - Listing the slide show's full source code
(Page 4 of 4 )
In the previous section, I showed you how to use the "$.ajax()" method included with the jQuery library to fetch a bunch of images from the web server, thus implementing a simple slide show.
The pieces that comprise this Ajax-driven application were shown separately, which can be more difficult to understand. To solve this issue, below I included the complete definitions of its source files, so you can grasp more easily how they work:
(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slide show using $.ajax() method</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(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);
}
});
});
</script>
<style type="text/css">
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 id="container">
</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" />';
?>
Here you have it! The two files shown before are all the source code that you'll need to get this Ajax-based slide show working...partially. Why partially? If you look more closely at the JavaScript code that fetches the "getimage.php" file from the web server, then you'll realize that it performs only one request after the whole web document is loaded.
Obviously, this implies that only the first image will be displayed on the browser, and the remaining ones will be missed in limbo! Well, it's not that bad really, since it's possible to use a JavaScript timer to trigger subsequent requests to the server to fetch all the images. In doing so, the slide show would work correctly.
However, the incorporation of this timer will be discussed in the last part of this series. Meanwhile, feel free to use all of the code samples developed earlier, which will help you become familiar with using the "$.ajax()" method bundled with jQuery.
Final thoughts
In this first tutorial of the series, I explained how to build a basic slide show by using the Ajax module included with jQuery. As you saw before, the use of the handy "$.ajax()" method makes this process simple.
Nevertheless, to finish building the slide show, it's necessary to incorporate a JavaScript timer to automate the requests to the server. This procedure will be performed in the last article, so you don't have any excuses to miss it!
| 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. |
/ 4 
