Bon Vojage!

tiny JQuery plugin that makes your cross-website tour simple!

1
2
3
4
5

Usage:

Just download, unzip and include boneVojage.js after JQuery source in your html markup:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bonevojage.min.js"></script>

and CSS styles file into a <head> section:

<link rel="stylesheet" href="bonevojage.css" />

to initialize Vojage just call boneVojage() function and pass array of JSON objects, that represents desired stop points in cross-website tour:


boneVojage([
            {
                // CSS selector of desired stop element
                selector: 'a#some_id_or_class'           
                
                // text about stop point
                text    : 'You can log in here!'    

            },
            {
                // CSS selector of desired stop element
                selector: 'a#another_id_or_class'           
                
                // text about stop point
                text    : 'You can download it here!'    

            }
]);

 

That's it! Vojage is initialized with default parametrs.

Options:

To override defaults, pass a JSON object with desired option as a second parameter (these are defaults):


boneVojage([
            {
                // CSS selector of desired stop element
                selector: 'a#some_id_or_class'           
                
                // text about stop point
                text    : 'You can log in here!'    

            },
            {
                // CSS selector of desired stop element
                selector: 'a#another_id_or_class'           
                
                // text about stop point
                text    : 'You can download it here!'    

            }],

            {
                // delay between points
                delay   : 1000

                // offset from stop-point element
                offset  : 4

                // position of tooltip element
                position    : 'best'

                // show map/progress of Vojage 
                map         : true
                
                // need control buttons (next/prev) ?
                buttons     : true

                // next key
                button_next : 39

                // previuos key
                button_prev : 37

                // position priority array (if position is 'best' )
                positionPriority : [ 
                                     'bottom',
                                     'top',
                                     'left', 
                                     'right',
                                     'bottom_left',
                                     'bottom_right',
                                     'top_left',
                                     'top_right'
                                    ]
            });

 

If you won't specify certain parameter, it will fallback to it's default property.

delay is time between stop-points (including scroll time) in milliseconds.

offset specifies distance from stop-point element in px.

position is a tooltip position relatively to stop-point element. If position is 'best' (default) boneVojage will find the best availible position in user's viewport, accordingly to positionPriority array from left to right ['bottom', 'top', 'left', 'right', 'bottom_left', 'bottom_right', 'top_left', 'top_right'] is defaults. If there is no such position, it will fallback to first left in positionPriority array.

map is map switcher. If map is true, tooltip will have a map/progress bullets.

buttons specifies if next/prev control buttons are needed.

button_next/button_prev is a keyCodes of keyboard keys to launch next/prev stop-point accordingly. Left and right arrows are defaults.

download fork
lego lab example download fork