guides.js
Guides.js is a lightweight javascript library for making guided website tours. It finds the element you want to highlight, creates a guide element using the html you specified in the configuration options and connects the guide and the highlighted element with an svg arrow.
Demo
http://ejulianova.github.io/guides/
Getting started
Once you have downloaded the source, simply include guides.css in the head of your page:
...
and guides.js in your page scripts section. Make sure you include it after jquery:
...
Note that you can import guides.scss and compile it togerther with your website styles if you are using sass.
Docs
Dependencies
Guides.js depends on jquery, so you need to make sure you include jquery first.
Initialization
Guides.js is a jquery plugin so it can be initialized on an element, that will "trigger" the guided tour:
;
Now the tour will start everytime $('#demo') element is clicked.
Configuration options
The default options are as follows:
distance: 100 color: '#fffff' guides:
- distance number - distance between the guide text and the element that it is related to
- color string - the guides arrows and text default color
- guides array of objects - the list of guides
The guides array
A guide object looks like this:
element: html: 'Welcome to Guides.js' color: '#fff'
- element (required) jquery element - the element you want to highlight
- html (required) string - this is the content of the tip: you can enter plain text or markup
- color (required) string - he guide arrow and text color (falls back to the default color if not specified)
Methods
- start $('#demo').guides('start');
- end $('#demo').guides('end');
- next $('#demo').guides('next');
- prev $('#demo').guides('prev');
- destroy $('#demo').guides('destroy');
- setOptions $('#demo').guides('setOptions', options);
Events
- start $('#demo').guides({start: onStartFunction});
- end $('#demo').guides({end: onStartFunction});
- next $('#demo').guides({next: onNextFunction});
- prev $('#demo').guides({prev: onPrevFunction});
- destroy $('#demo').guides({destroy: onDestroyFunction});
Download
The source is availabe on github: https://github.com/epetrova/guides/:
git clone https://github.com/epetrova/guides.git
Alternatively, you can install using Bower:
bower install guides