The features tour of your website is often the first thing that a visitor or potential client will click on after the “About Us” page. It’s a showcase for your strengths and accomplishments, which is why it makes sense to put your best foot forward. Joyride is 100% cross-browser compatible, eschews images in favor of pure CSS and allows you to create a features tour using nothing but a couple of lines of jQuery code and a few ol and li tags.
Setup and Configuration
Installing and using Joyride is about as easy as it gets when it comes to jQuery plugins. Just download the zip or tar archive and extract it to your root directory. After that, it’s merely a matter of linking to the
jquery.joyride.js stylesheets/app.css jquery-1.6.2.min.js
files included in the zipped folder from within the head section of any page. To create “stops” on your feature tour, all you have to do is apply header, paragraph and anchor id attributes to the elements you want to include. As long as you’re generally familiar with the absolute basics of jQuery UI design, using Joyride ought to be fairly straightforward and painless.
Performance and Demo
For a better idea of how Joyride works in the field, the fantastically done demo page found on Infinite WordPress is worth a look. Thanks to Joyride’s liberal MIT License, you’re free to do just about anything you want with the plugin. Advanced jQuery developers can certainly hack the module as much as they like, although the default functionality should be more than enough for most. It’s quite fast and responsive as it is, and the built-in options governing transitions and animations give you a lot wiggle room to work with when building a feature tour.