JAVASCRIPT

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

July 26, 2010

TABLE OF CONTENTS:

That was easy to code and read, right? As you can see, building a slide show with Cycle is a process to reduced to downloading the corresponding dependencies, and then calling its "cycle()" method with the appropriate arguments. In this example, the transition applied to each target image is a zoom in/out effect, but the plug-in provides many more, which are easily interchangeable.

Finally, here's the enhanced version of the previous web page, which this time includes the JavaScript snippet that you just saw:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Building a slide show using Progressive Enhancement</title>

$(document).ready(function() {

$("#slideshow").cycle({fx: 'zoom'});

});

</script>

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>

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

<h2>Slide show using the Cycle jQuery plug-in</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

If you're anything like me, it's probable that you want to see if this slide show is really functional. Thus, I suggest that you give the above example a try using your own browser (provided that you've already downloaded the set of sample images). If all goes well, you should see an animated sequence where each image is displayed and hidden via an engaging zooming in/out transition. Of course, the most appealing facet of this example is its accessibility, as the images will remain visible and therefore accessible even when JavaScript is turned off in the client.

Finally, feel free to edit all of the code samples included in this tutorial. Doing so will help you to grasp more quickly how to use Progressive Enhancement when building different web applications, like the one shown a moment ago.

Final thoughts

That's all for now. In this seventh part of the series, I went through the development of a jQuery-driven slide show, which used the handy Cycle plug-in to perform the transitions between the sample images. Even though the fancy zooming effect applied to the images is carried out by the plug-in, it's worth noting that the images remain visible even if the corresponding web page is displayed with JavaScript disabled. This demonstrates yet another case in which Progressive Enhancement is applied with satisfactory results.

In the next tutorial, I'm going to create another scenario where PE can be of great help when making user interfaces more accessible and usable. In this case I'm talking about creating an easily customizable drop-down menu with jQuery.

Want to see how this menu will be constructed? Then don't miss the next part!

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.