As a Rails programmer, I have been using Prototype and Scriptaculous for over a year and a half, solely because it comes packages with Rails and has helpers. About 3 months ago, I discovered JQuery, which is another Javascript library that combines the powers of Prototype and Scriptaculous into one. JQuery is very easy to install for your web app and has a TON of cool things you can do with it.

In this article, I will show you how to create a simple slide show using JQuery and the jQuery Cycle Lite plugin.

To see an example of how the final results should work, go to http://wynn.reservationcounter.com. You can also download the example code I use here.

Step 1. Download the jQuery library

Go to http://www.jquery.com and download the production-ready minified library. The file that I used is jquery-1.2.6.js.

Step 2. Download the jQuery Cycle Lite plugin

This can be found with numerous examples of this incredible plugin at http://malsup.com/jquery/cycle/lite/. At the bottom of the page, you will see a link jQuery Cycle Lite Plugin - minified. Save the targeted javascript file as jquery.cycle.lite.plugin.js.

Step 3. Create the HTML page to bring it all together

Ok.. let’s explain what’s going on here in the HTML.

Lines 4-7 are the javascript includes for the two libraries we downloaded. Note that the query include comes before the plugin. This is important.

Lines 8-15 are where the magic happens. Here we use jQuery to perform the cycle function on the element with the ID of ’slideshow_images’ with the parameters found on lines 11-12. There are many options available, which can be found at plugin website.

Lines 19-25 contains the div with the ID that is referenced on line 10. Inside this are 5 images that are all the same height and width.

That’s it. It’s very simple, but looks great.. sexy even! Have fun with this one.

To download the sample code for this example along with some images I took while I was in Europe, click here.