a lightweight jquery script for building tours around sites
by Thomas Diehl, www.dievolution.com
Imagine you developed a nice web application in your favorite language. Everything works fine, it is easy to use, but it could use an even better documentation. Something like an interactive tour...
Let's try Tourscript! It is a little javascript app based on jquery providing you a very easy way to show your users your site, your app or whatever you can think of. It uses json formatting on the backend, so you can feed it directly from the page, via a seperate file or via a database.
Demo
Click the demo button on the right or the start demo tour button on the top right to start the demo tour.
I am using this script in my application www.pomodorohelper.com, go there if you want to see a working example.
Install
Follow this steps to install Tourscript on your site:- Download Tourscript from Github by clicking the big download button
- Add jquery, jqueryUI (for the blinking stuff) and the tour.js to your websites head: click here to show code
- Load the tour: click here to show code
How to build a tour
Tours are stored in the json format. If you want to create a static tour, the easiest way is to create a .json file. Inside, use an array of hashs to display the tour. Sounds complicated? Here is an example:
Each hash is one item in the tour.
- "element" is the box who should be higlighted. This can be any valid jquery selector (must be unique, or the first one will be chosen)
- "label" is the description displayed underneath or above the highlighted element. It can contain html elements.
- "options": Just write an option as text in this part to activate. The following options are currently available:
- interactive : when using this option, the user will be able to click something in the highlighted element. Any form submit or link click will continue to the next part of the tour
- lastItem : this option should be used for the last element of the tour. This will replace the 'continue tour' link with a 'end tour' link, closing the tour.
- "highlight" is a highlight option for an element in the chosen element. The element will pulsate so the user can see what the description is currently talking about.
"element" and "label" should always be in a touritem, "options" and "highlight" are optional.
If you have problems using the script, use github or the "normal" ways to contact me.
I'm also always interested in new ideas and bugfixes for the script.