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.
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">
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.