Creating website tours using jQuery

One of the important tasks when creating a new site for clients is to create a written site documentation or a site tour video. The first part is a little tedious and sometimes confusing for the client or user and video requires some desktop software. Tympanus.net provide a nice jQuery tool to create site tours using JavaScript and css.

One of the main advantages of this approach is that you do not have to create a separate documentation or video tour for the site, but can integrate the tour right into the application and activate it as and when required through JavaScript.

To use it you need to add a certain class to the element you need to focus on in the tour. For example “tour_1”, “tour_2” and so on:

<div id="main_content">
	<h2 class="tour_1">Registration</h2>
.
.
</div>

Then in the javascript config variable you will add the description and other required attributes – color, position etc.

 
var config = [
{
    "name" 		: "tour_1",
    "bgcolor"	        : "black",
    "color"		: "white",
    "position"          : "TL",
    "text"		: "Click here to display the registration page.",
    "time" 		: 5000
},
{
    "name" 		: "tour_2",
    "bgcolor"	        : "black",
    "color"		: "white",
    "text"		: "Other description",
    "position"          : "BL",
    "time" 		: 5000
},
.
.
more elements

So now whenever the tour is started the element that has the class named “tour_1” will display the description “Click here to display the registration page” in a tool-tip, with a ‘black’ background and a ‘white’ foreground. The library has the ability to run the tour in a manual or auto mode. To get the details of how to incorporate the library into your site, the download code has an example page, which details the javascript used to design the tour.

VIEW DEMO
DOWNLOAD

4 thoughts on “Creating website tours using jQuery

  1. Love the idea, but it could be improved if the whole black mask was eliminated, and if the controls of the tour were moving along with the pop ups. thanks for sharing the original link too. nice blog 😉

Comments are closed.