Website Tour with jQuery

Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way. You might have noticed that Facebook used something like […]

Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.

You might have noticed that Facebook used something like this to explain the new features of the profile.

The idea is to add a certain class to elements that you want to guide the user through and explain what they do. We will use a little tooltip to show what that tour point is about, and a navigation will allow the user to go back and forth, to end the tour or to restart it.

Another option that you can use is autoplay which will allow the user to simply sit back and watch every step without having to click on the next button. You can see this in action here

To use this, you simply have to add a certain class to an element that you want to describe in the walk-through. We will be using “tour_1”, “tour_2” and so on:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

great script, however, it conflicts with jquery.svgdom.js, a part of the jQuery SVG plugin from http://keith-wood.name. If jquery.svgdom.js is included in the web page which triggers the Tour, there is an error.

Great Stuff ! Like others said before, I love your stuffs Mary Lou. What is the purpose of :
showControls();
because when I remove it, nothing works !
Another question, is it easy to modify the script in order to have the “previous” and “next” button and the autoplay at the same time ?

Is it possible to tour a screenshot image? Some sites in my portfolio are offline. I only have screenshots. These are full window shots that require scrolling down. I’ve seen your article on “Image Zoom Tour.” I’m looking for something more like this “Website Tour.” I like the next button rather than clicking on the image. Thanks a lot, Mike – PS: This website is great!