Those of you who work on client side scripting to any degree (XHTML, CSS, JavaScript, etc) are probably well familiar with some of the more common JavaScript libraries available. I have looked into different ones to some degree, and I have used a handful of them extensively before settling on one that best fits my needs. You see, as a developer, I love to conceive of my own patterns and objects to do things within my page, but I also don’t like having to delve into the innermost workings of the DOM unless absolutely necessary for optimization. This being said, for large scale applications like Content Management Systems (CMS) or administration panels, I like to use a themed, all inclusive solution like the Yahoo! User Interface Library (YUI) or ExtJS (an extension of YUI); however, when working with basic DOM manipulation or personal projects that require a lightweight solution, I have become enamored with the jQuery library.

This library, having been around for some time, has very quickly become my poison of choice due to the impressive DOM manipulation and basic animation tools supported natively while giving an excellent and easy to use selector scheme patterned after that of CSS. What can be easier to learn than applying the naming conventions you are already using within the document for styling to your JavaScript function calls? Another great benefit of this library is the ease at which you can iterate over groupings of selected items and apply functions to actions on those elements or simply change their attributes with extremely minimal amounts of code.

To illustrate the ease of this library, and actually accomplish something productive at the same time, I have created this basic jQuery Slide Show that is available in my code directory. This slide show object is instantiated with a simple declaration within an “onready” handler and picks up the content of the slides themselves directly from the markup. This allows for the content of the slides to still be counted in the page by spiders and other SEO bots. The goal was also to leave a level of accessibility to screen readers without having the code become inordinately convoluted. The pattern is that, in the class constructor call, the ID attribute of the DIV which will serve as the slide show’s containing DIV is passed in along with an optional configuration object. The configuration object defines things such as the transition type which you wish the slides to use as well as the timeout interval between slide transitions. One other feature that is currently supported and able to be turned on or off via the configuration object is that of causing the animations and transition timers to pause when the mouse hovers over the slide show DIV proper. This allows for people to stop the transitions to read the details within one of the slides, if they wish.

Slides are loaded into the slide show simply by applying the appropriate class name to the DIV which contains the slide content. For instance, in my example, every DIV within the containing div which has the className of “slide” will be sucked up by the slide show object and rotated in the cycle. Another note of which to be aware is that the sample page I posted allows for you to play with the settings of the slide show via the form at the bottom of the page. This form literally reloads the page with the settings you have chosen as part of the configuration object so you can view the source and see the JavaScript which causes the responding activity.

You may ask why I even bother posting this slide show information in a post where I’m raving about the jQuery library. Well, suffice to say that the slide show itself is built based on the jQuery library, and if you review the source for the Slideshow class itself, you will see just how simplistic everything is. I have attempted to fully document the class using the JSDoc format so as to make it that much easier to understand what the code is doing. Keep in mind that the currently available transitions (fade and shutter) are handled natively within the jQuery library and take absolutely no additional DOM manipulation. In future releases of this class, I will be adding some additional options for transition types that will use jQuery to perform some other animations as well.

Suffice to say that I have found my JavaScript library of choice for simple DOM manipulation and routine JavaScript coding where a lightweight yet robust library is needed. I will post updates to my slide show class as time permits, and if you have any questions or if you want to use my slide show on a site, I would appreciate you letting me know how it’s being used so I can keep track of where my code resides.