WebTour.js

Simple and easy integration guide for your website.
Step-by-step or several steps at once explain its functionality.

Instructions

Place WebTour files on a server and then adds them to the page. Make sure that the jQuery library is included.

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

<!-- Add WebTour -->
<link href="styles/WebTour.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/WebTour.js"></script>
How to use
jQuery(document).ready(function () {

	WebTour.config = {
		background: '0,0,0',
		backgroundOpacity: 0.8,
		button: 'auto',
		startInFirstStep: true,
		scrollAuto: true,
		detectResizeWindow: false,
		autoplay: false
	};

	WebTour.create({
		0: [{
			element: "#EmbedJS h1 span",
			description: "- easy integration<br>- infinitely position<br>- full documentation &amp; examples<br>- more, more and more...",
			position: "r",
			padding: 5,
			lineA: 50,
			closeSign: false
		},
		{
			element: "#EmbedJS h1 span",
			description: "simple guide for Your website",
			position: "bl",
			padding: 5,
			lineA: 20,
			lineB: 35,
			next: false,
			closeSign: false
		}],
		1: [{
			element: ".fb-like",
			description: "Click here to liked WebTour ;]",
			position: "rb",
			padding: 5,
			closeSign: false
		}]
	});

	WebTour.init();

});
Documentation

Config

background background color in rgb
String; Default value: 0,0,0
backgroundOpacity the value of transparency background
Number; Default value: 0.8
button visibility of navigation buttons
String | Boolean; Value: auto | true | false; Default value: auto
startInFirstStep start guide from the first step
Boolean; Default value: true
scrollAuto auto-scroll to the visible element
Boolean; Default value: true
detectResizeWindow detect window resize
Boolean; Default value: false
autoplay autoplay steps
Boolean; Default value: false

Steps

element presented a page element
String
description description of element
String
position position description window
String; Value: tl | t | tr | rt | r | rb | br | b | bl | lb | l | lt
padding extra space between the frame and the presented element
Integer; Default value: 0
lineA size of the first line
Integer; Default value: 100
lineB size of the second line
Integer; Default value: 150
radius rounded corners
Boolean; Default value: true
closeSign whether to be shown an "x" to close the guide
Boolean; Default value: true
closeButton whether to be shown the "Close"
Boolean; Default value: false
duration the duration of the display step
Integer; Default value: 2500; 2500 = 2.5s | 1000 = 1s