Building Slide Shows Using Progressive Enhancement
(Page 1 of 4 )
In this seventh part of the series, I develop a jQuery-driven slide show which uses the Cycle plug-in for performing the transitions between the sample images. While the fancy zooming effect applied to the images is carried out by the plug-in, it's worth noting that the images will remain visible even if the web page is displayed with JavaScript disabled. This demonstrates yet another case where Progressive Enhancement is applied with satisfying results.
As you know, Progressive Enhancement (PE) is a crucial facet of modern web design, so learning how to implement it when developing some real-world web applications is something you'll have to tackle sooner or later. So, if you're interested in seeing how to take advantage of the benefits offered by this clever paradigm during the construction of a few common web programs such as dynamic image galleries, drop-down menus, and slide shows, then hopefully this article series will be the material that you're looking for.
And now that you know what to expect from the series, it's time to review the topics that were discussed in the last tutorial. In that article, I showed how to build a customizable program which was tasked with validating the data entered on an HTML form by using a combination of Ajax and PHP.
Needless to say, checking web forms offers nothing particularly interesting, at least for those who have to perform this task on a frequent basis. In this case, though, things were a little bit different. The program created could remain entirely functional even if JavaScript was turned off on the browser, thanks to the proper use of PE.
It valid to note, however, that this approach can be used in many other cases, not just for checking HTML forms on the server side. With that idea in mind, in this seventh part of the series I'm going to demonstrate how to use PE for building a jQuery-based slide show, which you'll be able to tweak according to your specific needs.
Now, it's time to leave the preliminaries behind and start writing the source code that will make this sample slide show work as expected, even on user machines with a minimal hardware/software configuration. Let's go!
Next: Review: using Progressive Enhancement when validating web forms >>
More JavaScript Articles
More By Alejandro Gervasio
