Home arrow JavaScript arrow Page 2 - Finishing a Slide Show Application with jQuery
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
October 16, 2009
TABLE OF CONTENTS:
  1. · Finishing a Slide Show Application with jQuery
  2. · Listing the slide show application’s partial source code
  3. · Incorporating a JavaScript timer
  4. · Listing the application’s complete source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Finishing a Slide Show Application with jQuery - Listing the slide show application’s partial source code
(Page 2 of 4 )

Before I proceed to demonstrate how to use a JavaScript timer to complete the development of this Ajax-driven slide show, first let me spend a few moments listing the source files that comprise it, as they were created initially in the previous part of the series. 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">

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

?>


Do the above files ring any bells for you? I hope they do! The slide show is made up of two modules. The first one, represented by the previous “slide_show.htm” file, is responsible for fetching several images from the web server via the “$.ajax()” method provided by jQuery. And the second module, implemented by the “getimage.php” file, is tasked with sending to the client a different image each time a new request is triggered by the client.

As you can see, the logic that drives the slide show is pretty simple to follow, even if you’re not very familiar with using the jQuery package.

However, as I expressed in the introduction, it’s necessary to build a mechanism that permits it to fetch automatically all of the images that compose the slide show, so they can be displayed in a specific sequence. In a case like this, this mechanism will be implemented through a JavaScript timer, which will allow it to retrieve a different image at a predefined interval.

This interesting process will be properly discussed in the section to come, so click on the link that appears below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials