# 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