Building Slide Shows Using Progressive Enhancement
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.
Building Slide Shows Using Progressive Enhancement - Building a simple slide show with jQuery (Page 3 of 4 )
Considering that my goal here is to build a simple slide show using PE, the first thing we need to do is create the "regular" version of the application. Once that base is set, the slide show's dynamic behavior will be implemented afterward via jQuery.
Having clarified that point, here's how this sample slide show will look in its "slim" state:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Building a slide show using Progressive Enhancement</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #fff;
font: 0.8em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#header, #content, #footer {
padding: 20px;
}
#slideshow {
width: 370px;
height: 320px;
}
#slideshow img {
padding: 10px;
background: #ddd;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Building a slide show using Progressive Enhancement</h1>
<h2>Header section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
<div id="content">
<h2>Slide show using the Cycle jQuery plug-in</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</div>
</body>
</html>
As you can see, the previous web page includes a div identified as "slideshow," which contains the five sample images shown in the first chapter of this series (you can download them from here). This is the initial structure of the slide show, whose images can be viewed in nearly every modern browser.
With that basic structure up and running, the next step we must take is to create the enhanced version of the slide show. In this case, we'll implement it via jQuery's Cycle plug-in. The full details of this process will be discussed in the following segment, so to get there click on the link below and keep reading.
JavaScript 
HTML5 Boilerplate: Working with jQuery and Modernizr
