Walkthrough Type Modal

Each step has numerous configuration options to fine-tune its position and appearance. This step demonstrates the "modal" option which doesn't highlight any part of the page.system for designing interactive, multimedia, educational walkthroughs.

Walkthrough Type Tooltip & Highlighting Area

Walkthough can highlight any part of the page and link it to content. Since the highlight is based on standard CSS selectors, they will adjust if the page changes.

Tooltip Top Position

Walkthough is defined as a series of steps, each with custom content. The content can be placed above (like here)...

Tooltip Right Position

...on the right...

Tooltip Bottom Position

...on the bottom...

Tooltip Left Position

...or on the left...

Walkthrough Type No Highlight

Walkthrough can be used without highlighting area

Tooltip Draggable

Walkthrough tooltip draggable...

NoHighlight Draggable

Walkthrough no highlight drag and drop...

Content Rotation

All walkthrough type support Content Rotation Feature

Tooltip Type Accessable Highlight Area

You can set the highlight area to be accessable

Auto Scroll

Auto scrolling page to the walkthrough step, this step will show you autoScroll options set FALSE which means it will not autoscroll for this step

Stay Focus to The Walkthrough

Walkthrough has option to force user stay focus on the walkthrough step, try to scroll down on this step

DONE...!!!

Woohoo...It's Done!, Now please click 'close' button at top right corner to close this walkthrough

onBeforeShow & onAfterShow

This callback will be executed only on before show & on after show the first step

onRestart

This callback will be executed when walkthrough is restarted

onLeave

This callback will be executed on LEAVE this step

onEnter

This callback will be executed on ENTER this step

onClose

This callback will be executed on walkthrough close. Now try to close the walkthrough now..

onCookieLoad

On Cookie Load means when walkthrough has been closed it will set a cookie and tells the walkthrough to not load automaticly. Try to refresh the page to see onCookieLoad callback

Method show

This method allows you to open page walkthrough

$.pagewalkthrough('show', target)

Target is your walkthrough ID, i.e: #selector

Method Next

This method allows you to go the NEXT step

$.pagewalkthrough('next', event)

Note: event is needed as a param to call next method

Method Prev

This method allows you to go the PREVIOUS step

$.pagewalkthrough('prev', event)

Note: event is needed as a param to call prev method

Method Restart

This method allows you to RESTART walkthrough

$.pagewalkthrough('restart', event)

Note: event is needed as a param to call restart method

Method Close

This method allows you to CLOSE walkthrough

$.pagewalkthrough('close', target)

Target is optional. It could be filled with walkthrough ID or leave it blank

Property: isPageWalkthroughActive

This property will return status of page walkthrough

$.pagewalkthrough('isPageWalkthroughActive')

Property: currIndex

This property will return current index of current walkthrough step

$.pagewalkthrough('currIndex')

Property: getOptions

This property will return walkthrough options whether it an active walkthrough options or all walkthrough options

$.pagewalkthrough('getOptions', activeWalkthrough)

activeWalkthrough = true / false. By default it is FALSE, if set TRUE it will return current active walkthrough object, if FALSE it will return Array of all walkthrough options
Prev Step

Image in Step Content

You can add image in step content.

Embedding Video

You can embedding video too...

Step Validation

jQuery Page Walkthrough also supports powerful options for control-of-flow. For example, this step won't let you proceed unless you fill in a valid phone number (numbers only)

Support

For future feature and issue support you can contact me at erwin.yusrizal@gmail.com