Guidely - MadeByAmp

Guidely is a functional jQuery plugin that facilitates guided website tours for your new or returning website users.

To get started with Guidely, add the guidely.css stylesheet to your document:

<link rel="stylesheet" href="guidely/guidely.css" type="text/css" charset="utf-8" />

Also add the Guidely javascript file to your document:

<script src="guidely/guidely.js"></script>

Demo #1

Demo #2

Demo #3

Positions

For support email the author through his Code Canyon author page http://codecanyon.net/user/MadeByAmp

---

Adding Guides

• All guides must be added before calling the init ()
• Required options are attachTo and text.
• Valid values for anchor are top-left, top-middle, top-right, middle-left, middle-middle, middle-right, bottom-left, bottom-middle, bottom-right

guidely.add ({ 
	attachTo: '#header'
	, title: 'Guide Title'
	, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
	, anchor: 'top-left'		
});	

---

Starting Guidely

• Before you initialize make sure all of the guides you need are set up.
• If welcome option is set to true, welcomeTitle and welcomeText default messages will show. You can customize this option by passing in a welcome and/or initial text for your guide.
• All other options are set to true as a default (please see table below).

guidely.init ({
	welcome: true
	, welcomeTitle: 'Welcome to the guided tour!'
	, welcomeText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'			
});	

---

Options

guidely.init ()

Option Name	Default Value	Explanation
welcome	true	Displays the welcome screen before initializing the guide numbers & content.
overlay	true	Adds an overlay on top of website content
startTrigger	true	Displays a start tour button so users can view the guide when necessary.
escClose	true	Enables the guide to be closed using the esc key
keyNav	true	Allows users to navigate the guides using the left & right arrow keys.
welcomeTitle	Welcome to the guided tour!	Replaces the default welcome title.
welcomeText	Click start to view a brief walk through of our website.	Replaces the default welcome text.

guidely.add ()

Option Name	Default Value	Explanation
attachTo	empty selector	Accepts a jQuery selector to attach the number to.
anchor	top-left	Defines where on the selected object the guide number will be attached to. Valid options are top-left, top-middle, top-right, middle-left, middle-middle, middle-right, bottom-left, bottom-middle, bottom-right
title	(optional string)	Optional title to display in the guide.
text	(required string)	Required text to display in the guide.

---

API

Option Name	Parameters	Explanation
init	config	Accepts options config and prepares guidely
add	config	Accepts an options config and queues the guide for creation
start		Starts guidely. Shows the numbers and first guide
show	guide number	Accepts a guide number and displays the corresponding guide
next		Cycles to the next guide if available.
prev		Cycles to the previous guide if available
close		Disables guidely; can be restarted using guidely.start ()
hideGuides		Hides all visible guides
showNumbers		Makes all guide numbers visible
hideNumbers		Hides all guide numbers
showOverlay		Makes the overlay visible
hideOverlay		Hides the overlady