Quicktour.js

Intuitive, pretty jQuery website tours. Here's a demo.

Here's the demo's code:

$(document).ready(function () {
	var q = new Quicktour({
		fade_in_time: 1000,
		title: "Hi there, thanks for stopping by. Looks like it's your first time here.",
		title_options: {
			padding: "250px"
		},
		padding_dimensions: {
			top: 10,
			bottom: 10,
			left: 10,
			right: 10
		}
	});

	q.addItem({element: $('.banners'),
		description: "Click on the banners to see my profiles on social media.",
		padding_dimensions: {
			top: 10,
			bottom: 10,
			left: 40,
			right: 10
		}
	});

	q.addItem({element: $('.nav'),
		description: "You can see all the other parts of my site here.",
		description_options: {"width": 400}
	});

	q.addItem({element: $('.header-image'),
		description: "Check out my shades!"});
	
	q.start();
});

Implementation

Download the quicktour.js javascript file and include it in your page (along with jQuery).

Basic Functionality

Create a new tour object. This is ready to go out of the box - you don't need to specify any options. However, you need to add elements before you can start the tour.

var q = new Quicktour({
	...
});

Add items. A tour item is an object that takes the keys `element` (a jquery of what you want to highlight) and `description` (the description of the element(s)), as well as multiple other parameters described later.

q.addItem({element: $('.banners'),
	description: "Click on the banners."
});

Start the tour. Quicktour.js uses an iterative loop to highlight each tour item in the order you add them. A dark frame will appear over the website, showing a title (if specified), and the tour will progress with each click.

q.start();

Available Options

Tour options

These are specified in the Quicktour constructor.

`fade_time`	The time, in milliseconds, for the dark frame and the highlights on each item to fade in and out. Defaults to 500.
`frame_opacity`	The opacity of the background frame. Defaults to 0.7.
`set_css`	If true, Quicktour.js will set element level css based on the specified options below. Defaults to true.
`highlight_color`	The hex code of the color you want the highlighted border to be, including the hash sign. Defaults to #36BBCE, a nice cheery light blue.
`text_color`	The hex code (again including the hash sign) that you want the description text to appear in. Defaults to `highlight_color`, and then to #36BBCE.
`step_through`	If true, the tour will progress iteratively based on when the user clicks on the page. If false, all tour elements will be shown at once. Defaults to true.
`title`	A title or introductory statement for the tour. Will be shown before anything else is highlighted.
`title_options`	An object with the keys `width`, `padding`, and `font`, which will be used to set the respective CSS attributes of the title element if `set_css` is set. Defaults to "100%", "200px" and "'Helvetica Neue', Halvetica, sans-serif" respectively. Note that the `padding` option specifes only the `padding-top` of the title element.
`description_offset`	An object with the keys `top` and `left`, where each is a number. These specify an offset for the positioning of the description for each element. If they are both 0, the description will appear directly under the border of the element (accounting for padding). If, for example, `top` is 30, then the descriptions will appear 30 pixels lower than they usually would. Defaults to `{top: 30, left: 0}`.
`description_font`	A CSS compatible string which will be used to set the CSS `font-family` attribute of the the descriptions if `set_css` is set. Defaults to Helvetica Neue, similarly to `title_options`.
`padding_dimensions`	An object with the keys `top`, `bottom`, `left`, and `right` that will be used as a fallback for the pixel width of the padding (space between content and border) of the tour items. Defaults to 5 for all.
`border_dimensions`	An object with the keys `top`, `bottom`, `left`, and `right` that will be used as a fallback for the pixel width of the border of the tour items. Defaults to 3 for all.

Item options

These are added as extra keys to the addItem method. Any item-level option specified here for a specific item will override defaults and tour-level options.

`border_dimentions`, `padding_dimensions`	The same as specified above, except they apply to the item they are specified for only.
`description_options`	An object with keys `width`, `offset`, and

Methods

var q = Quicktour({...}, [...]);	Create a new Quicktour object with the specified options and, optionally, a list of items to add to it initially.
q.addItem({element: ..., description: ...});	Add an item to the tour.
q.setOption(key, val);	Set a given option key to the value val.
q.resetOptions({...});	Reset all the options of a given tour as if you had passed the options to the constructor.
q.start();	Start the tour. The tour will end (and the darkend frame will go away) when all the elements have been iterated through.
q.stop();	End the tour.