king_tour

king_tour copied to clipboard

= KingTour - Royal On-Page Tours

You can make screenshots, movies or write a manual for your web app .. OR go for on-page tutorials.

On-Page tutorials, as the name suggests, live directly in your app. A user clicks his way through the web-application while reading your help bubbles

A KingTour can serve as:

• Getting started tour
• Help
• Documentation with video and images
• Show-case your app within a demo account
• just about anything you can imagine, as long as it's html

== Usage

See example here: http://salesking.github.com/king_tour/

Look into the source and use firebug to get a grasp of it .. as long as the docs are sparse :-)

=== Basics

A tour is a div, identified by its id attribute. For each tour step the main tour wrapper contains divs with the real bubble content. The content can be any html.

The tour and its steps are configured inside the div's title element, with options interpreted by javascript.

=== Example

Setup KingTour with some custom options. For detailed options see http://github.com/salesking/king_tour/blob/master/king_tour.js#L141

KingTour.tourId = 'MyTourDivId'; //custom skin, located in skins folder KingTour.skinId = 'salesking'; //whatever base you've got KingTour.BASE_URL = '/javascripts/king_tour/'; //where to go on close KingTour.closeUrl = '#'; //stay here when in multi-page tour KingTour.onCloseClickStay = true; //enable mouse click for prev/next .. actually pretty confusing KingTour.mouseNav = true; //go for it KingTour.open();

Tour html definition and div title options:

== Size

17.2K compressed(lf, comments)

5.7K gziped

== Credits

This repo started with a clone of amberjack2 and was jQueryfied with lots of fixes and enhancements during it's implementation at SalesKing. amberjack was originally developed by Arash Yalpani. I would be glad to commit back to the origin if Arash puts up his sources on Github.