iGuider Doc

### Tools

### Introducing

### API

### Info

# iGuider documentation

Created: 27/11/2017
Updated: 12/11/2019
Version: 4.5
By: MASSCODE
URL: https://codecanyon.net/item/iguider-jquery-webpage-help-tour/21073716
Email: limasscode@gmail.com
Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

# Introducing

## Description

The jQuery plugin «iGuider» gives you the opportunity to tell you about the functionality of any interface. In addition, the plugin «iGuider» can perform the function of teaching, display the task, prompt you what to do and follow up on implementation of tasks. This is the most flexible and functional plugin among all his analogs.

This is the most flexible and multifunctional help-tour plugin in the world.

## Features

- Continue the tour after move to other page
- Saving the progress of the tour after updating the page
- Check conditions
- Control the tour using the keyboard
- Waiting for an item to appear
- Control of message width.
- Automatic generation of the start button of the tour.
- Automatic generation of the list of tours
- Tour Builder (Enables Generate your tour code in a user-friendly interface)
- Chrome Extension (Gets an unique selector code for any element on the page)
- Additionally present WordPress version of plugin
- Multiple targets same time
- Three shapes of highlighting: rectangle, circle and rounded rectangle
- Templating
- Styling
- Processing code color in any format
- Autopilot
- Tracking position of the dragged element
- Multiple pages
- Ability to continue the unfinished tour
- Smooth change of color and opacity for each step individually
- Management from outside
- The intro slide in center of screen
- Displays the tour covers
- Works with dynamic content
- Works with hidden content (select, tabs etc.)
- Localization (60 languages)
- Different way of searching elements. Supports most CSS3 selectors, as well as some non-standard selectors.
- Supports operating system "windows (7,8,10)", MacOS, iOS, Android
- Supports brousers IE 11+, Firefox, Chrome, Safari
- Detailed documentation and tour about the tour
- 37 Positions' Variants
- Auto Positioning of Message
- Detect Events
- Trigger Events
- Callback Functions
- Map of All Steps
- Control of Buttons Text
- Scroll to Element
- Highlighting of passed steps
- Responsive
- Compatibility with the "Select2" plugin
- Compatibility with the "jQuery UI Tabs"
- Compatibility with the "Bootstrap Collapse"

## License

All parts of this plugin: CSS and javascript codes are licensed according to the license purchased from Envato.

Read more about licensing here: http://codecanyon.net/licenses

## Purchased Archive Structure

Once you have downloaded and extracted the iGuider.zip file, you should find the following directory structure:

/ iGuider / — css / — js / — themes / — localization / — demos / — doc_files / — chrome_extension / — wordpress_plugin / — documentation.html — demos.html — builder.html — quick-start-tpl.html
css/ | This folder contains the "iGuider.css" file which contain all the basic styles.
js/ | This folder contains the "jquery.iGuider.js" file which contain the global architecture. And "jquery.min.js" library.
themes/ | This folder contains templates and themes of the plugin.
localization/ | This folder contains localization files for the plugin interface.
demos/ | This folder contains demonstration pages for all parameters.
doc_files/ | This folder contains the files needed to describe the iGuider plugin.
chrome_extension/ | This folder contains chrome extension, which gets an unique selector code for any element on the page.
wordpress_plugin/ | This folder contains WordPress version of plugin.
documentation.html | This file contains a description of the plugin and examples of use.
demos.html | This file contains a list of demos.
builder.html | This file contains a Tour Builder, which enables Generate your tour code in a user-friendly interface.
quick-start-tpl.html | This file contains the minimum required code for quick connection and start the tour.

## Files Connection

1. Javascript library jQuery View details
2. The style file. Used for the decoration of all the elements of a plugin. View details
3. The main plugin file View details
4. The theme files css and js View details

<head> ...[THIS CODE]... </head>

    <script src="js/jquery.js"></script>

    <link rel="stylesheet" href="css/iGuider.css">
    <script src="js/jquery.iGuider.js"></script>

    <link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
    <script src="themes/material/iGuider-theme-material.js"></script>

## Plugin Initialization

Calling the plugin, you should be sure to specify the parameter "steps".

Parameter "steps" includes settings for each step of the tour.

The setting "target" should correspond to the value of the attribute "data-target" in the html code or selector name (class, id, other attributes).

You can omit the default parameters

    <script>
    $(window).on('load',function(){
    	iGuider({
    		tourID:'anyTourID',							//This string allows you to save data with a unique name about tour progress.
    													//It can be used to save information on the progress of the tour for several users.
    													//Or save the progress of each tour separately
    		tourTitle:'Tour Title Default',				//Tour title
    		tourSubtitle:'Tour Subtitle Default',
    		startStep:1,								//Step from which the tour begins

    		overlayClickable:true,						//This parameter enables or disables the click event for overlying layer
    		overlayColor:'#000',						//Global color values of the overlay layer.
    		overlayOpacity:0.5,							//Global opacity values of the overlay layer.

    		pagination:true,							//Shows the total number of steps and the current step number
    		registerMissingElements:true,				//Shows an absent element in tour map and find this element in DOM.
    		textDirection:'ltr',						//Global text direction. (ltr, rtl)

    		shape:0,									//Global shape of highlighting. 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
    		shapeBorderRadius:5,						//Global corner radius of rounded rectangle shape. Only when "shape" value is "2"

    		width:320,									//Global width of the message block

    		bgColor:false,								//Global background color of the message block
    		titleColor:false,							//Global title color of the message block

    		modalContentColor:false,					//Global content color of the message block
    		modalTypeColor:false,						//Global modal type color of the message block

    		paginationColor:false,						//Global pagination color of the message block
    		timerColor:false,							//Global timer color of the message block

    		btnColor:false,								//Global buttons color
    		btnHoverColor:false,						//Global buttons hover color

    		spacing:10,									//Global indent highlighting around the element
    		loc:false,									//Global path to the page on which the step should work
    		timer:false,								//Global time after which an automatic switching to the next step
    		timerType:'line',							//Global timer shape type: 'line' or 'circle'
    		keyboard:true,								//Tour control by keyboard buttons. Left - the previous step, right - the next step, Esc - close tour.
    		keyboardEvent:false,						//This parameter sets the permission to trigger custom events.

    		intro:{										//Default intro settings
    			enable:true,							//If set to true, before the tour you will see the introductory slide, which will offer to see a tour.

    			title:'Welcome to the interactive tour',												//Title of introduction dialog
    			content:'This tour will tell you about the main site functionalities',					//Content of introduction dialog

    			cover:'',								//Path to the cover of intro
    			overlayColor:false,						//For intro, you can specify the different color values of the overlay layer.
    			overlayOpacity:false,					//For intro, you can specify the different opacity values of the overlay layer.
    			width:false,							//Width of the intro message block

    			bgColor:false,							//Background color of the intro message block
    			titleColor:false,						//Title color of the intro message block

    			modalContentColor:false,				//Content color of the intro message block
    			modalTypeColor:false,					//Modal type color of the intro message block

    			btnColor:false,							//Buttons color of the intro message block
    			btnHoverColor:false						//Buttons Hover color of the intro message block
    		},

    		continue:{									//Default the continue message settings
    			enable:true,							//This parameter add the ability to continue the unfinished tour.

    			title:'Continue the unfinished tour?',											//Title of continue dialog
    			content:'Click "Continue" to start with step on which finished last time.',		//Content of continue dialog

    			cover:'',								//Path to the cover of continue message
    			overlayColor:false,						//For continue message, you can specify the different color values of the overlay layer.
    			overlayOpacity:false,					//For continue message, you can specify the different opacity values of the overlay layer.
    			width:false,							//Width of the continue message block

    			bgColor:false,							//Background color of the continue message block
    			titleColor:false,						//Title color of the continue message block

    			modalContentColor:false,				//Content color of the continue message block
    			modalTypeColor:false,					//Modal type color of the continue message block

    			btnColor:false,							//Buttons color of the continue message block
    			btnHoverColor:false						//Buttons Hover color of the continue message block
    		},

    		tourMap: {									//Default Tour Checklist settings
    			enable:true,							//This parameter add the ability view list of steps.
    			position:'right',						//Checklist Position
    			clickable:true,							//Specifies the clickability of links in the checklist of steps: true - clickable, false - disabled, or 'ready' - clickable only completed steps and current
    			open:false,								//Specifies to show or hide the Checklist at the start of the tour

    			bgColor:false,							//Background color of the Checklist
    			titleColor:false,						//Title color of the Checklist

    			btnColor:false,							//Buttons color of the checklist block
    			btnHoverColor:false,					//Buttons hover color of the checklist block

    			itemColor:false,						//Item color of the Checklist
    			itemHoverColor:false,					//Item hover color of the Checklist
    			itemActiveColor:false,					//Item Active color of the Checklist
    			itemActiveBg:false,						//Item Active BG color of the Checklist
    			itemNumColor:false,						//Item Number color of the Checklist

    			checkColor:false,						//Check color of the Checklist
    			checkReadyColor:false					//Check Ready color of the Checklist
    		},

    		steps:[{									//Default step settings
    			cover:'',								//Path to image file
    			title:'New Step Title',					//Name of step
    			content:'New Step Description',			//Description of step
    			position:'auto',						//Position of message
    			target:'uniqueName',					//Unique Name (<div data-target="uniqueName"></div>) of highlighted element or .className (<div class="className"></div>) or #idValue (<div id="idValue"></div>)
    			disable:false,							//Block access to element
    			overlayOpacity:0.5,						//For each step, you can specify the different opacity values of the overlay layer.
    			overlayColor:'#000',					//For each step, you can specify the different color values of the overlay layer in HEX .
    			spacing:10,								//Indent highlighting around the element, px
    			shape:0,								//Shape of highlighting (0 - rectangle, 1 - circle, 2 - rounded rectangle)
    			shapeBorderRadius:5,					//The corner radius of rounded rectangle shape. Only when "shape" value is "2"
    			timer:false,							//The time after which an automatic switching to the next step
    			event:'next',							//An event that you need to do to go to the next step
    			eventMessage:'Follow the required conditions to continue.',		//Message hint for steps with custom events
    			skip: false,							//Step can be skipped if you set parameter "skip" to true.
    			nextText:'Next',						//The text in the Next Button
    			prevText:'Prev',						//The text in the Prev Button
    			trigger:false,							//An event which is generated on the selected element, in the transition from step to step
    			stepID:'',								//Unique ID Name. This name is assigned to the "html" tag as "data-g-stepid" attribute (If not specified, the plugin generates it automatically in the form: "step-N")
    			waitElementTime:0,						//The parameter "waitElementTime" sets the time (ms) to wait for an item to appear
    			loc:false,								//The path to the page on which the step should work
    			ready:false,							//This parameter indicates whether the step was completed or not.
    			width:320,								//Width of the message block
    			autofocus:true,							//Automatically puts the cursor in the selected form element.

    			bgColor:false,							//Background color of the message block
    			titleColor:false,						//Title color of the message block

    			modalContentColor:false,				//Content color of the message block

    			paginationColor:false,					//Pagination color of the message block
    			timerColor:false,						//Timer color of the message block

    			btnColor:false,							//Buttons color of the message block
    			btnHoverColor:false,					//Buttons Hover color of the message block

    			keyboardEvent:false,					//This parameter sets the permission to simulate user events for step.

    			checkNext:{                             //Function in which you can carry out any verification by clicking on the "Next" button.
    				func:function(){return true;},       ////If the function returns True, the step will be switched.
    				messageError:'Fulfill all conditions!'  //If the function returns "False", an error message will appear in the message window
    			},
    			checkPrev:{                             //Function in which you can carry out any verification by clicking on the "Prev" button.
    				func:function(){return true;},
    				messageError:'Fulfill all conditions!'
    			},
    			before:function(target){},					//Triggered before the start of step
    			during:function(target){},					//Triggered after the onset of step
    			after:function(target){},						//Triggered After completion of the step, but before proceeding to the next
    			delayBefore:0,							//The delay before the element search, ms
    			delayAfter:0							//The delay before the transition to the next step, ms
    		}],

    		lang: {										//Default language settings
    			cancelTitle: 'Cancel Tour',				//The title in the cancel tour button
    			cancelText: '×',						//The text in the cancel tour button
    			hideText: 'Hide Tour Map',				//The text in the hidden tour map button
    			tourMapText:'≡',						//The text in the show tour button
    			tourMapTitle: 'Tour Map',				//Title of Tour map button
    			nextTextDefault:'Next',					//The text in the Next Button
    			prevTextDefault:'Prev',					//The text in the Prev Button
    			endText:'End Tour',						//The text in the End Tour Button

    			contDialogBtnBegin:'Start over',		//Text in the start button of continue dialog
    			contDialogBtnContinue:'Continue',		//Text in the continue button of continue dialog

    			introDialogBtnStart:'Start',			//Text in the start button of introduction dialog
    			introDialogBtnCancel:'Cancel',			//Text in the cancel button of introduction dialog

    			modalIntroType:'Tour Intro',			//Type Name of intro dialog
    			modalContinueType:'Unfinished Tour'		//Type Name of continue dialog
    		},

    		create: function(){},						//Triggered when the iGuider is created
    		start: function(){},						//Triggered before first showing the step
    		progress: function(data){},					//Triggered together with start any step
    		end: function(){},							//Triggered when the tour ended, or was interrupted
    		abort: function(){},						//Triggered when the tour aborted
    		finish: function(){},						//Triggered when step sequence is over
    		play: function(){},							//Triggered when the timer state switches to "play"
    		pause: function(){},						//Triggered when the timer state switches to "pause"

    		modalTemplate:								//Modal window template
    		'<div class="gWidget">'+
    			'<div class="gCover">[modal-cover]</div>'+
    			'<div class="gAction">'+
    				'<span class="gType">[modal-type]</span>'+
    				'<span class="gBtn">[modal-map]</span>'+
    				'<span class="gBtn">[modal-close]</span>'+
    				'<div class="gTimer">[modal-timer]</div>'+
    			'</div>'+
    			'<div class="gScroll">'+
    				'<div class="gHeader">[modal-header]</div>'+
    				'<div class="gContent">[modal-body]</div>'+
    			'</div>'+
    			'<div class="gFooter">'+
    				'<span class="gPage">'+
    					'<span class="gPageVal">[step-value]</span>'+
    					'<span class="gPageTotal">[step-total]</span>'+
    				'</span>'+
    				'<span class="gBtn">[modal-prev]</span>'+
    				'<span class="gBtn">[modal-next]</span>'+
    				'<span class="gBtn">[modal-cancel]</span>'+
    				'<span class="gBtn">[modal-start]</span>'+
    				'<span class="gBtn">[modal-begin-first]</span>'+
    				'<span class="gBtn">[modal-begin-continue]</span>'+
    			'</div>'+
    		'</div>',

    		mapTemplate:								//Tour Map template
    		'<div class="g-map-pos">'+
    			'<div class="gMapAction">'+
    				'<span class="gBtn">[map-toggle]</span>'+
    				'<span class="gBtn">[map-hide]</span>'+
    			'</div>'+
    			'<div class="gMapHeader">[map-header]</div>'+
    			'<span class="gPage">'+
    				'<span class="gPageVal">[step-value]</span>'+
    				'<span class="gPageTotal">[step-total]</span>'+
    			'</span>'+
    			'<div class="gMapContent">[map-content]</div>'+
    			'<div class="gMapBufer"></div>'+
    		'</div>',

    		debug: false								//Display of messages in the console
    	});
    })
    </script>

## CSS Structure

Core CSS file iGuider.css (css/iGuider.css) in this plugin. It contains styles which are responsible for the correct plugin work.

## JavaScript

To use the plugin you must import two files of javascript:

1. jQuery (js/jquery-3.1.1.min.js)
2. jquery.iGuider.js (js/jquery.iGuider.js)

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write. If you imported this version of jQuery or any other, it is not necessary to import it for the second time. Supported by jquery 1.x , 2.x , 3.x

2. The main plugin code.

## Themes Structure

The theme consists of two files.

1. themeName.js - Contains the template code of the plugin interface.

The square brackets with the content ID are the keys by which the plugin determines where to insert the interface elements.

    /* Template "material" for iGuider plugin. */

    //Modal window template
    modalTpl =
    '<div class="gWidget">'+
    	'<div class="gCover">[modal-cover]</div>'+
    	'<div class="gAction">'+
    		'<span class="gType">[modal-type]</span>'+
    		'<span class="gBtn">[modal-map]</span>'+
    		'<span class="gBtn">[modal-close]</span>'+
    		'<div class="gTimer">[modal-timer]</div>'+
    	'</div>'+
    	'<div class="gScroll">'+
    		'<div class="gHeader">[modal-header]</div>'+
    		'<div class="gContent">[modal-body]</div>'+
    	'</div>'+
    	'<div class="gFooter">'+
    		'<span class="gPage">'+
    			'<span class="gPageVal">[step-value]</span>'+
    			'<span class="gPageTotal">[step-total]</span>'+
    		'</span>'+
    		'<span class="gBtn">[modal-prev]</span>'+
    		'<span class="gBtn">[modal-next]</span>'+
    		'<span class="gBtn">[modal-cancel]</span>'+
    		'<span class="gBtn">[modal-start]</span>'+
    		'<span class="gBtn">[modal-begin-first]</span>'+
    		'<span class="gBtn">[modal-begin-continue]</span>'+
    	'</div>'+
    '</div>'

    //Tour Map template
    mapTpl =
    '<div class="g-map-pos">'+
    	'<div class="gMapAction">'+
    		'<span class="gBtn">[map-toggle]</span>'+
    		'<span class="gBtn">[map-hide]</span>'+
    	'</div>'+
    	'<div class="gMapHeader">[map-header]</div>'+
    	'<span class="gPage">'+
    		'<span class="gPageVal">[step-value]</span>'+
    		'<span class="gPageTotal">[step-total]</span>'+
    	'</span>'+
    	'<div class="gMapContent">[map-content]</div>'+
    	'<div class="gMapBufer"></div>'+
    '</div>'

2. themeName.css - Contains the appearance styles of the plugin interface.

The theme styles file must be included!

## Localization Files

Localize the iGuider help-tour language and format (English / Western formatting is the default).

The iGuider includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

To plugin interface was on the language you want, include to page the one of localization files.

These files are in the "localization" folder.

Include the file you want after including plugin files

    <script src="js/jquery.js"></script>

    <link rel="stylesheet" href="css/iGuider.css">
    <script src="js/jquery.iGuider.js"></script>

    <link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
    <script src="themes/material/iGuider-theme-material.js"></script>

    <script src="localization/iGuider-de.js"></script>

The available languages are:

1. iGuider-af.js
2. iGuider-ar.js
3. iGuider-az.js
4. iGuider-be.js
5. iGuider-bg.js
6. iGuider-bs.js
7. iGuider-ca.js
8. iGuider-cs.js
9. iGuider-cy.js
10. iGuider-da.js
11. iGuider-de.js
12. iGuider-el.js
13. iGuider-en.js
14. iGuider-eo.js
15. iGuider-es.js
16. iGuider-et.js
17. iGuider-eu.js
18. iGuider-fa.js
19. iGuider-fi.js
20. iGuider-fr.js
21. iGuider-gl.js
22. iGuider-he.js
23. iGuider-hi.js
24. iGuider-hr.js
25. iGuider-hu.js
26. iGuider-hy.js
27. iGuider-id.js
28. iGuider-is.js
29. iGuider-it.js
30. iGuider-ja.js
31. iGuider-ka.js
32. iGuider-kk.js
33. iGuider-km.js
34. iGuider-ko.js
35. iGuider-ky.js
36. iGuider-lb.js
37. iGuider-lt.js
38. iGuider-lv.js
39. iGuider-mk.js
40. iGuider-ml.js
41. iGuider-ms.js
42. iGuider-nb.js
43. iGuider-nl.js
44. iGuider-nn.js
45. iGuider-pl.js
46. iGuider-pt.js
47. iGuider-ro.js
48. iGuider-ru.js
49. iGuider-sk.js
50. iGuider-sl.js
51. iGuider-sq.js
52. iGuider-sr.js
53. iGuider-sv.js
54. iGuider-ta.js
55. iGuider-th.js
56. iGuider-tj.js
57. iGuider-tr.js
58. iGuider-uk.js
59. iGuider-vi.js
60. iGuider-zh.js

Example of use: view

## Quick Start

Copy this code into your page or use file
"quick-start-tpl.html" from archive.

    <!--Latest jQuery-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <!--iGuider Core-->
    <link rel="stylesheet" href="css/iGuider.css">
    <script src="js/jquery.iGuider.js"></script>

    <!--iGuider Theme-->
    <link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
    <script src="themes/material/iGuider-theme-material.js"></script>

    <script>
    /* iGuider Parameters */
    var opt = {
        'tourTitle': 'Tour Title Default',
        'steps': [
            {
                'title': 'New Step Title',
                'content': 'New Step Description',
                'target': ''
            }
        ]
    };

    /* iGuider Button */
    $(window).on('load',function(){
        iGuider('button',opt);
    });
    </script>

Done!

## WordPress Version

### Installation

Except jQuery plugin, in the archive there is WordpPress version of plugin "iGuiderWP.zip"
The plugin is located in the folder "wordpress_plugin"

1. Install it like any other WP plugin

2. For edit the initialization file click "edit"

3. Then select the "init.iGuider.js" file

4. After editing, click the "Update" button.

# API

## Options

Option | Default value | Datatype | Description
--- | --- | --- | ---
tourID | "anyTourID" | String | This string allows you to save data with a unique name about tour progress. It can be used to save information on the progress of the tour for several users. Or save the progress of each tour separately. It may take the values: "any string value"
tourTitle | "Tour Title Default" | String | Tour title It may take the values: "any string value"
startStep | 1 | Number | Step from which the tour begins. It may take the values: any positive integer
overlayClickable | true | Boolean | If set to false, then links of steps on the tour map will not be clickable It may take the values: true or false
overlayColor | "#000" | String | Global color value of overlay layer It may take the values: Any color format '#000', 'rgb(0,0,0)' or 'black'
overlayOpacity | 0.5 | Number | Global opacity value of overlay layer It may take the values: any positive integer from 0 to 1
pagination | true | Boolean | Shows the total number of steps and the current step number It may take the values: true or false
registerMissingElements | true | Boolean | Shows an absent element in tour map and find this element in DOM. It may take the values: true or false
textDirection | "ltr" | String | The direction property specifies the text direction/writing direction. It may take the values: 'ltr' or 'rtl'
shape | 0 | Number | Global shape of highlighting. 0 - rectangle (default), 1 - circle, 2 - rounded rectangle It may take the values: 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
shapeBorderRadius | 5 | Number | Global corner radius of rounded rectangle shape. Only when "shape" paramenter has value "2" It may take the values: any positive number
width | 320 | Number / String | Global width of the message block, px,% It may take the values: 320, '320px' or '50%'
spacing | 10 | Number | Global indent highlighting around the element, px It may take the values: any positive number
loc | false | String | Global path to the page on which the step should work. It may take the values: "anyPagePath"
timer | false | Boolean / Number | Global time after which an automatic switching to the next step It may take the values: any positive number or false
timerType | 'line' | String | Global timer shape type It may take the values: 'line' or 'circle'
keyboard | true | Boolean | Tour control by keyboard buttons. Left - the previous step, right - the next step, Esc - close tour. It may take the values: true or false
keyboardEvent | false | Boolean | This parameter sets the permission to trigger custom events. It may take the values: true or false
bgColor | false | Boolean / Number | Global background color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
titleColor | false | Boolean / Number | Global title color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
modalContentColor | false | Boolean / Number | Global content color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
modalTypeColor | false | Boolean / Number | Global modal type color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
paginationColor | false | Boolean / Number | Global pagination color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
timerColor | false | Boolean / Number | Global timer color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
btnColor | false | Boolean / Number | Global buttons color It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
btnHoverColor | false | Boolean / Number | Global buttons hover color It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro |

    intro:{
    	enable:true,
    	cover:'',

    	title:'Welcome to the interactive tour',
    	content:'This tour will tell you about the main site functionalities',

    	overlayColor:false,
    	overlayOpacity:false,
    	width:false,
    	bgColor:false,
    	titleColor:false,
    	modalContentColor:false,
    	modalTypeColor:false,
    	btnColor:false,
    	btnHoverColor:false
    }
| Object | It contains parameters of the intro message It may take the values: objects
intro.enable | true | Boolean | If set to true, before the tour you will see the introductory slide, which will offer to see a tour. It may take the values: false or true
intro.cover |  | String | Path to the cover of intro. It may take the values: "Path to the cover"
intro.title | "Welcome to the interactive tour" | String | Title of introduction dialog It may take the values: "any string value"
intro.content | "This tour will tell you about the main site functionalities" | String | Content of introduction dialog It may take the values: "any string value"
intro.overlayColor | false | String / Boolean | Color value of overlay layer for intro It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.overlayOpacity | false | Number | Opacity value of overlay layer for intro It may take the values: any positive integer from 0 to 1 or false
intro.width | false | Number / String / Boolean | Width of the message intro block, px,% It may take the values: 320, '320px', '50%' or false
intro.bgColor | false | Boolean / Number | Background color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.titleColor | false | Boolean / Number | Title color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.modalContentColor | false | Boolean / Number | Content color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.modalTypeColor | false | Boolean / Number | Modal type color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.btnColor | false | Boolean / Number | Buttons color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
intro.btnHoverColor | false | Boolean / Number | Buttons Hover color of the intro message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue |

    continue:{
    	enable:true,
    	cover:'',

    	title:'Continue the unfinished tour?',
    	content:'Click "Continue" to start with step on which finished last time.',

    	overlayColor:false,
    	overlayOpacity:false,
    	width:false,
    	bgColor:false,
    	titleColor:false,
    	modalContentColor:false,
    	modalTypeColor:false,
    	btnColor:false,
    	btnHoverColor:false
    }
| Object | It contains parameters of the continue message It may take the values: objects
continue.enable | true | Boolean | This parameter add the ability to continue the unfinished tour. It may take the values: false or true
continue.cover |  | String | Path to the cover of continue message. It may take the values: "Path to the cover"
continue.title | "Continue the unfinished tour?" | String | Title of continue dialog It may take the values: "any string value"
continue.content | "Click \"Continue\" to start with step on which finished last time." | String | Content of continue dialog It may take the values: "any string value"
continue.overlayColor | false | String / Boolean | Color value of overlay layer for continue message It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.overlayOpacity | false | Number / Boolean | Opacity value of overlay layer for continue message It may take the values: any positive integer from 0 to 1 or false
continue.width | false | Number / String / Boolean | Width of the message continue block, px,% It may take the values: 320, '320px', '50%' or false
continue.bgColor | false | Boolean / Number | Background color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.titleColor | false | Boolean / Number | Title color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.modalContentColor | false | Boolean / Number | Content color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.modalTypeColor | false | Boolean / Number | Modal type color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.btnColor | false | Boolean / Number | Buttons color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
continue.btnHoverColor | false | Boolean / Number | Buttons Hover color of the continue message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap |

    tourMap: {
    	enable:true,
    	position:'right',
    	clickable:true,
    	open:false,
    	bgColor:false,
    	titleColor:false,
    	btnColor:false,
    	btnHoverColor:false,
    	itemColor:false,
    	itemHoverColor:false,
    	itemActiveColor:false,
    	itemActiveBg:false,
    	itemNumColor:false,
    	checkColor:false,
    	checkReadyColor:false
    }
| Object | It contains parameters of the Tour Map It may take the values: objects
tourMap.enable | true | Boolean | This parameter add the ability view list of steps. It may take the values: false or true
tourMap.position | "right" | String | Tour Map Position It may take the values: "right" or "left"
tourMap.clickable | true | Boolean | If set to false, then links of steps on the tour map will not be clickable It may take the values: true - clickable, false - disabled, or 'ready' - clickable only completed steps and current
tourMap.open | false | Boolean | Specifies to show or hide the map of the tour at the start of the tour It may take the values: false or true
tourMap.bgColor | false | Boolean / Number | Background color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.titleColor | false | Boolean / Number | Title color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.btnColor | false | Boolean / Number | Buttons color of the checklist block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.btnHoverColor | false | Boolean / Number | Buttons hover color of the checklist block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemColor | false | Boolean / Number | Item color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemHoverColor | false | Boolean / Number | Item hover color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemActiveColor | false | Boolean / Number | Item Active color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemActiveBg | false | Boolean / Number | Item Active BG color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.itemNumColor | false | Boolean / Number | Step Number color in the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.checkColor | false | Boolean / Number | Check color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
tourMap.checkReadyColor | false | Boolean / Number | Check Ready color of the Checklist It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps |

    steps:[{
    	cover:'',
    	title:'New Step Title',
    	content:'New Step Description',
    	position:'auto',
    	target:'uniqueName',
    	disable:false,
    	overlayOpacity:0.5,
    	overlayColor:'#000',
    	spacing:10,
    	shape:0,
    	shapeBorderRadius:5,
    	timer:false,
    	event:'next',
    	eventMessage:'Follow the required conditions to continue.',
    	skip: false,
    	nextText:'Next',
    	prevText:'Prev',
    	trigger:false,
    	stepID:'',
    	waitElementTime:0,
    	loc:false,
    	ready:false,
    	width:320,
    	autofocus:true,
    	keyboardEvent:false,
    	bgColor:false,
    	titleColor:false,
    	modalContentColor:false,
    	paginationColor:false,
    	timerColor:false,
    	btnColor:false,
    	btnHoverColor:false,
    	checkNext:{
    		func:function(target){return true},
    		messageError:'Fulfill all the conditions!'
    	},
    	checkPrev:{
    		func:function(target){return true},
    		messageError:'Fulfill all the conditions!'
    	},
    	before:function(target){},
    	during:function(target){},
    	after:function(target){},
    	delayBefore:0,
    	delayAfter:0
    }]
| Array | Specifies information about each step of the tour It may take the values: array of objects
steps[n].cover | false | Boolean / String | Path to image file It may take the values: false or string value of path to image
steps[n].title | "New Step Title" | String | Title of step It may take the values: "any string value"
steps[n].content | "New Step Description" | String | Description of step It may take the values: "any string value"
steps[n].position | "auto" | String | Position of message. It may take the values: "auto", "center" or positioning code: "xxx" "auto" - The plugin can automatically choose the best position out of 36 available to display a tour's message. "center" - The message is displayed in the center of screen and no element is highlighted. The parameter 'target' in this case is not required! "xxx" - Code which indicates the position of the window with the message tll, tlc, tlr, tcl, tcc, tcr, trl, trc, trr, rtt, rtc, rtb, rct, rcc, rcb, rbt, rbc, rbb, brr, brc, brl, bcr, bcc, bcl, blr, blc, bll, lbb, lbc, lbt, lcb, lcc, lct, ltb, ltc, ltt "xxx" - First Symbol: The position of message a relatively selected item. It may take the values: t (top),r (right),b (bottom),l (left) "xxx" - Second Symbol: The position of corner a relatively selected item. a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom); b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right); "xxx" - Third Symbol: The position of the window with a message a relatively coner. a) if first symbol is "l" or "r" it may take the values:t (top), c (center),b (bottom); b) if first symbol is "t" or "b" it may take the values:l (left), c (center),r (right);
1. steps[n].target | "" | String | Search for page elements that need to be highlighted can be done in several ways:

       target: 'uniqueName'	/*<div data-target="uniqueName"></div>*/

       target: '.className'	/*<div class="className"></div>*/

       target: '#idValue'		/*<div id="idValue"></div>*/

       target: '<tagname class="classname">' /*<tagname class="classname">content</tagnam>*/
2. You can highlight several elements at the same time. To do this, give them the same names or list them separated by commas.

       target: '.name-1, .name-2, .name-3'
3. Message in center of screen without specifying a specific target.

       target: ''	/*or Absent target parameter.*/
It may take the values: "any string value"
steps[n].disable | false | Boolean | Block access to element It may take the values: false or true
steps[n].overlayOpacity | 0.5 | Number | Opacity value of overlay layer It may take the values: any positive number from 0 to 1
steps[n].overlayColor | "#000" | Number | Clor value of overlay layer It may take the values: Any color format '#000', 'rgb(0,0,0)' or 'black'
steps[n].spacing | 10 | Number | Indent highlighting around the element, px It may take the values: any positive number
steps[n].shape | 0 | Number | Shape of highlighting It may take the values: 0 - rectangle (default), 1 - circle, 2 - rounded rectangle
steps[n].shapeBorderRadius | 5 | Number | The corner radius of rounded rectangle shape. Only when "shape" paramenter has value "2" It may take the values: any positive number
steps[n].timer | false | Boolean / Number | The time after which an automatic switching to the next step, ms It may take the values: any positive number or false
steps[n].event | "next" | String / Array | An event that you need to do to go to the next step It may take the values: "next", "click", "mousedown", "mouseup", "mouseenter", "keydown", "keyup", "blur", "submit" and others jQuery events. If you want to listen for the event in another element, then use the array construction. The first array element is an "event", the second element is a jQuery object It may take the values: ["eventName","yourSelector"] "eventName" - Any jQuery event jQuery events "yourSelector" - Any jQuery selector name (".classname","#idname", and other jquery selectors jQuery selectors)
steps[n].eventMessage | "Follow the required conditions to continue." | String | Message hint for steps with custom events It may take the values: any text.
steps[n].skip | false | Boolean | Step can be skipped if you set parameter "skip" to true. It may take the values: false or true.
steps[n].nextText | "Next" | String | The text in the Next Button It may take the values: "any string value"
steps[n].prevText | "Prev" | String | The text in the Prev Button It may take the values: "any string value"
steps[n].trigger | false | String / Boolean | An event which is generated on the selected element, in the transition from step to step. jQuery events It may take the values: Name of Event or false
steps[n].stepID | false | String | Unique ID Name. This name is assigned to the "html" tag as "data-g-stepid" attribute (If not specified, the plugin generates it automatically in the form: "step-N") It may take the values: "any string value"
steps[n].waitElementTime | 0 | Number | The parameter "waitElementTime" sets the time (ms) to wait for an item to appear It may take the values: any positive number
steps[n].loc | false | String | The path to the page on which the step should work. It may take the values: "anyPagePath"
steps[n].ready | false | Boolean | This parameter indicates whether the step was completed or not. It may take the values: false or true.
steps[n].width | 320 | Number / String | For more convenient display of content, you can adjust the width of the message window. You can change this width by setting the value in pixels or persent (screen width relative). The minimum width is 320 pixels. If you do not specify the width of the window, it will accept the default value. It may take the values (for example): 500, '500px' or '500%'.
steps[n].autofocus | true | Boolean | Automatically puts the cursor in the selected form element. It will accept the default value. It may take the values: true or false.
steps[n].keyboardEvent | false | Boolean | This parameter sets the permission to trigger custom events for current step. It may take the values: true or false
steps[n].bgColor | false | Boolean / Number | Background color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].titleColor | false | Boolean / Number | Title color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].modalContentColor | false | Boolean / Number | Content color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].paginationColor | false | Boolean / Number | Pagination color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].timerColor | false | Boolean / Number | Timer color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].btnColor | false | Boolean / Number | Buttons color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].btnHoverColor | false | Boolean / Number | Buttons Hover color of the message block It may take the values: Any color format '#000', 'rgb(0,0,0)', 'black' or false
steps[n].checkNext |

    checkNext: {
    	func:function(target){return true},
    	messageError:'Fulfill all the conditions!'
    }
| Object | An object containing parameters that set conditions for the transition between steps to forward. It may take the values: array of objects.
steps[n].checkNext.func |

    function(target){return true}
| Function | Function in which you can carry out any verification by clicking on the "Next" button. If the function returns True, the step will be switched. It must return the values: false or true.

    function(target){
    	var a = [YOUR DATA];
    	var b = [YOUR DATA];
    	if(a == b){
    		return true;
    	}else{
    		return false;
    	}
    }
steps[n].checkNext.messageError | "Fulfill all the conditions!" | String | If the function returns "False" (steps[n].checkNext.func), an error message will appear in the message window It may take the values: any text
steps[n].checkPrev |

    checkPrev: {
    	func:function(target){return true},
    	messageError:'Fulfill all the conditions!'
    }
| Object | An object containing parameters that set conditions for the transition between steps to back. It may take the values: array of objects.
steps[n].checkPrev.func |

    function(target){return true}
| Function | Function in which you can carry out any verification by clicking on the "Prev" button. If the function returns True, the step will be switched. It must return the values: false or true.

    function(target){
    	var a = [YOUR DATA];
    	var b = [YOUR DATA];
    	if(a == b){
    		return true;
    	}else{
    		return false;
    	}
    }
steps[n].checkPrev.messageError | "Fulfill all the conditions!" | String | If the function returns "False" (steps[n].checkPrev.func), an error message will appear in the message window It may take the values: any text
steps[n].delayBefore | 0 | Number | The delay before the element search, ms It may take the values: any positive number
steps[n].delayAfter | 0 | Number | The delay before the transition to the next step, ms It may take the values: any positive number
lang |

    lang: {
    	cancelTitle: 'Cancel Tour',
    	cancelText:	'×',
    	hideText: 'Hide Tour Map',
    	tourMapText:'≡',
    	tourMapTitle: 'Tour Map',
    	nextTextDefault:'Next',
    	prevTextDefault:'Prev',
    	endText:'End Tour',

    	contDialogBtnBegin:'Start from beginning',
    	contDialogBtnContinue:'Continue',

    	introDialogBtnStart:'Start',
    	introDialogBtnCancel:'Cancel',

    	modalIntroType:'Tour Intro',
    	modalContinueType:'Unfinished Tour'
    }
| Object | It contains information about the text of the interface elements It may take the values: objects
lang.cancelTitle | "Cancel Tour" | String | The ttitle in the cancel tour button It may take the values: "any string value"
lang.cancelText | "×" | String | The text in the cancel tour button It may take the values: "any string value"
lang.hideText | "Hide Tour Map" | String | The text in the hidden tour map button It may take the values: "any string value"
lang.tourMapText | "≡" | String | The text in the show tour button It may take the values: "any string value"
lang.tourMapTitle | "Tour Map" | String | Title of Tour map button It may take the values: "any string value"
lang.nextTextDefault | "Next" | String | The text in the Next Button It may take the values: "any string value"
lang.prevTextDefault | "Prev" | String | The text in the Prev Button It may take the values: "any string value"
lang.endText | "End Tour" | String | Sets the text for the close button in the last step of the tour It may take the values: "any string value"
lang.contDialogBtnBegin | "Start from beginning" | String | Text in the start button of continue dialog It may take the values: "any string value"
lang.contDialogBtnContinue | "Continue" | String | Text in the continue button of continue dialog It may take the values: "any string value"
lang.introDialogBtnStart | "Start" | String | Text in the start button of introduction dialog It may take the values: "any string value"
lang.introDialogBtnCancel | "Cancel" | String | Text in the cancel button of introduction dialog It may take the values: "any string value"
lang.modalIntroType | "Tour Intro" | String | Type Name of intro dialog It may take the values: "any string value"
lang.modalContinueType | "Unfinished Tour" | String | Type Name of continue dialog It may take the values: "any string value"
modalTemplate |

    modalTemplate:
    '<div class="gWidget">'+
    	'<div class="gCover">[modal-cover]</div>'+
    	'<div class="gAction">'+
    		'<span class="gType">[modal-type]</span>'+
    		'<span class="gBtn">[modal-map]</span>'+
    		'<span class="gBtn">[modal-close]</span>'+
    		'<div class="gTimer">[modal-timer]</div>'+
    	'</div>'+
    	'<div class="gScroll">'+
    		'<div class="gHeader">[modal-header]</div>'+
    		'<div class="gContent">[modal-body]</div>'+
    	'</div>'+
    	'<div class="gFooter">'+
    		'<span class="gPage">'+
    			'<span class="gPageVal">[step-value]</span>'+
    			'<span class="gPageTotal">[step-total]</span>'+
    		'</span>'+
    		'<span class="gBtn">[modal-prev]</span>'+
    		'<span class="gBtn">[modal-next]</span>'+
    		'<span class="gBtn">[modal-cancel]</span>'+
    		'<span class="gBtn">[modal-start]</span>'+
    		'<span class="gBtn">[modal-begin-first]</span>'+
    		'<span class="gBtn">[modal-begin-continue]</span>'+
    	'</div>'+
    '</div>'
| String | Modal window template It may take the values: objects
mapTemplate |

    mapTemplate: 							//Tour Map template
    '<div class="g-map-pos">'+
    	'<div class="gMapAction">'+
    		'<span class="gBtn">[map-toggle]</span>'+
    		'<span class="gBtn">[map-hide]</span>'+
    	'</div>'+
    	'<div class="gMapHeader">[map-header]</div>'+
    	'<span class="gPage">'+
    		'<span class="gPageVal">[step-value]</span>'+
    		'<span class="gPageTotal">[step-total]</span>'+
    	'</span>'+
    	'<div class="gMapContent">[map-content]</div>'+
    	'<div class="gMapBufer"></div>'+
    '</div>'
| String | Tour Map template It may take the values: objects
debug | false | boolean | Display of messages in the console It may take the values: false or true.

## Methods

prev() | Switches the tour to the previous step This method does not accept any arguments

    iGuider('prev');
next() | Switches the tour to the next step This method does not accept any arguments

    iGuider('next');
update() | Updating the position of elements highlighting This method does not accept any arguments

    iGuider('update');
map(position) | Sets the tour map in the specified part of the screen position Type: String Map Tour position: "left","right" or "toggle" "toggle" - changes position to the opposite.

    iGuider('map','left');
destroy() | Removes all effects of plugin. It returns all elements in the condition before the initialization of the plugin This method does not accept any arguments

    iGuider('destroy');
setStep(number) | This method switches the tour to the specified step. number Type: String or Number Step number

    iGuider('setStep','2');
getStep() | This method returns the active step number. This method does not accept any arguments

    iGuider('getStep');
timerState(state) | This method switches the auto-viewing between states: "play" and "pause". state Type: String timer state: "play" or "pause"

    iGuider('timerState','pause');
design(type) | This method allows you to fix the state of the message block at any stage of the tour. type Type: String message type: "intro", "continue" or step number. f.e. "3"

    iGuider('design','3');
button(options) | This method shows the preset button to display and start the tour list. options Type: Object (for one tour) or Array (for several tours)

    iGuider('button',{
    	/*...options...*/
    });

    /* or */

    iGuider('button',[
    	{/*...options 1...*/},
    	{/*...options 2...*/},
    	{/*...options N...*/}
    ]);
set(options) | This method declares a set of parameters for one or several tours in order to be able to run the tour by referring to this set by a unique identifier. For each tour in the parameters must be specified parameter "tourID", otherwise the set will not be installed. Sets are declared using an array. To use the parameters set, use the "run" method. options Type: Array

    /* Declaring of parameters for one tour */
    iGuider('set',[
    		{tourID:'anyCustomName',...}
    	]
    );

    /* Declaring options for multiple tours */
    iGuider('set',[
    		{tourID:'one',...},
    		{tourID:'two',...},
    		...
    		{tourID:'anyCustomName',...}
    	]
    );
The name of the method "set" is optional.

    iGuider([
    		{tourID:'one',...},
    		{tourID:'two',...}
    	]
    );
run(id) | This method starts a tour from the parameter set that matches the passed identifier by "set" method. Each running tour stops the demonstration of the previous tour. id Type: String

    iGuider('set',[
    		{tourID:'one',...},
    		{tourID:'two',...}
    	]
    );

    iGuider('run','one');
setTitle(text) | This method allows you to change the name of the step in the information window. type Type: String message type: any string or html code

    iGuider('setTitle','new title');
setContent(text) | This method allows you to change description of the step in the information window. type Type: String message type: any string or html code

    iGuider('setContent','new content');

## Events

create() | Triggered when the plugin is created

    iGuider({
    	create: function(){}
    });
start() | Triggered before first showing the step

    iGuider({
    	start: function(){}
    });
progress() | Triggered together with start any step

    iGuider({
    	progress: function(data){}
    });
data Type:object data.step - Step number data.steps - Total number of steps
end() | Triggered when the tour ended, or was interrupted

    iGuider({
    	end: function(){}
    });
abort() | Triggered when the tour aborted

    iGuider({
    	abort: function(){}
    });
finish() | Triggered when step sequence is over.

    iGuider({
    	finish: function(){}
    });
steps[n].before() | Triggered before the start of step

    iGuider({
    	steps: [{
    		before:function(target){}
    	}]
    });
steps[n].during() | Triggered after the onset of step

    iGuider({
    	steps: [{
    		during:function(target){}
    	}]
    });
steps[n].after() | Triggered After completion of the step, but before proceeding to the next

    iGuider({
    	steps: [{
    		after:function(target){}
    	}]
    });
play() | Triggered when the timer state switches to "play".

    iGuider({
    	play:function(){}
    });
pause() | Triggered when the timer state switches to "pause".

    iGuider({
    	pause:function(){}
    });

## Additional Functionality

data-iguider | This is interactive data-attribute "data-iguider". In this attribute, you can specify the ID of the tour. If the tour parameters with this identifier were previously declared in the parameter set by the "set" method, then by clicking on the element with the data-attribute, the tour corresponding to the ID will be launched.

    <script>
    $(window).on('load',function(){

    	/*This is object with tour options*/
    	var opt_one = {
    		tourID:'one',
    		...
    	};
    	var opt_two = {
    		tourID:'two',
    		...
    	};

    	iGuider('set',[opt_one,opt_two]);
    })
    </script>

    <a class="btn" data-iguider="one">Start One</a>
    <a class="btn" data-iguider="two">Start Two</a>

## Selector Getter

Addition to the iGuider and iTour plugins.
Gets an unique selector code for any element on the page.

Select one of the options

- Install from Chrome Web Store
  Does not work on local pages
- Install from unpacked directory in Developer mode
  You can start by turning on Developer mode. Click the Chrome menu icon and select Extensions from the Tools menu. Ensure that the "Developer mode" checkbox in the top right-hand corner is checked. Now you can reload extensions, load an unpacked directory of files as if it were a packaged extension, and more.
  The packed extension file is located in the "chrome_extension" folder.

After turning on the extension, you will see the boundaries of the page elements by hovering the mouse over them. When you right-click on any element of the page, you get a unique selector code for this element. This code will be displayed in a popup fixed window.

auto-viewing

After you receive the selector code, you can save it to the clipboard, and then paste it into the iGuider plugin initialization code. Popup window can be moved in the any place of your screen, that it does not block the elements you need.

## Update History

#### Version 4.5 (Nov 12, 2019)

##### NEW FEATURES

- Added new method "setTitle". This method allows you to change the name of the step in the information window.
- Added new method "setContent". This method allows you to change the name of the step in the information window.

#### Version 4.4 (June 02, 2019)

##### BUGFIXES

- Fixed a bug where a dynamically created element did not get the "iGuider-highlight" class name

##### NEW FEATURES

- Added new parameter "autofocus". It automatically puts the cursor in the selected form element.

##### CHANGES

- Added example of a tour in conjunction with datapicker "snippet-datepicker"

#### Version 4.3 (December 16, 2018)

##### NEW FEATURES

- Added interactive data-attribute "data-iguider". In this attribute, you can specify the ID of the tour. If the tour parameters with this identifier were previously declared in the parameter set by the "set" method, then by clicking on the element with the data-attribute, the tour corresponding to the ID will be launched.
- Added new method "run". This method starts a tour from the parameter set that matches the passed identifier.
- Added new method "set". This method declares a set of parameters for one or several tours in order to be able to run the tour by referring to this set by a unique identifier.
- In the checklist, added installation of the viewed step to "ready" state, if this step does not require user events or conditions.
- Added file "quick-start-tpl.html". This file contains the minimum required code for quick connection and start the tour.

##### CHANGES

- Fully redesigned logic of the message automatic positioning.
- Various other improvements.

#### Version 4.2 (December 11, 2018)

##### CHANGES

- Improved tour navigation across pages.

#### Version 4.1 (December 10, 2018)

##### NEW FEATURES

- Added new method "design". It allows you to fix the state of the message block at any stage of the tour.
- Added new method "button". This method shows the preset button to display and start the tour list.
- Added new event "play". This event triggered when the timer state switches to "play".
- Added new event "pause". This event triggered when the timer state switches to "pause".
- Added new attribute "data-g-step" into HTML tag. This attribute displays the current step number.

##### CHANGES

- The attribute name has been changed, in which the value of the stepID parameter is displayed. Changed "data-step" to "data-g-stepid"
- Improved block width adaptation with message relative to screen width
- Improved display of the block with the message when scrolling the page.

##### BUGFIXES

- Fixed switching themes in the builder.

#### Version 4.0 (December 06, 2018)

##### NEW FEATURES

- Added new event "start". Triggered before first showing the step
- Added preview window to the tour builder
- Added new event "progress". Triggered together with start any step
- Added restoration of the set checklist position after updating the page

##### CHANGES

- Improved work with alternative highlighting
- Improved operation of "delayBefore" and "delayAfter" parameters
- Changed the name of the short code in the template for the cover

#### Version 3.1 (November 30, 2018)

##### CHANGES

- Improved visualization for Right to Left text orientation
- Removed the effect of the highlight shape to scrolling

#### Version 3.0 (November 30, 2018)

##### CHANGES

- Removed the "duration" sub-parameter
- The sub-parameters "messageNextError" and "messagePrevError" have been removed from "lang" parameter
- The sub-parameters "introTitle" and "introContent" have been renamed to "title" and "content" and transferred from "lang" to "intro"
- The sub-parameters "contDialogTitle" and "contDialogContent" have been renamed to "title" and "content" and transferred from "lang" to "continue"

#### Version 2.12 (November 29, 2018)

##### NEW FEATURES

- Added new value "ready" for sub-parameter "clickable" in to tourMap Options. This value makes clickable only completed steps and current
- Added new sub-parameter "eventMessage" in to Step Options. This parameter sets message hint for steps with custom events
- Added new parameter "keyboardEvent" in to General Options. This parameter sets the permission to trigger custom events: true or false (default)
- Added new sub-parameter "keyboardEvent" in to Step Options. This parameter sets the permission to trigger custom events for current step: true or false (default)

##### CHANGES

- Improved translations: czech and slovakia

#### Version 2.11 (November 27, 2018)

##### NEW FEATURES

- Added new parameter "timerType" in to General Options. Sets shape type of the timer progress bar: "line" (default) or "circle"
- Added auto-view control buttons: "play" and "pause"
- Added new method "timerState". This method switches the auto-viewing between states: "play" and "pause".

##### CHANGES

- Changed user interaction logic with auto-viewing.

##### BUGFIXES

- Improved work with missing elements on the page.

#### Version 2.10 (November 26, 2018)

##### BUGFIXES

- Added local storage clearing of all plugin data when the tour is completed.
- Fixed corner display conditions in the message window.

#### Version 2.9 (November 26, 2018)

##### NEW FEATURES

- Added new method "setStep". This method switches the tour to the specified step.
- Added new method "getStep". This method returns the active step number.

##### BUGFIXES

- Added overlay layer while waiting for the first element to appear. Checklist will be open only after the appearance of the item.
- Improved the behavior of the block with the message at extremely small screen resolutions.
- Improved the behavior of the block with a message that is larger than the visible area of the screen.

#### Version 2.8 (November 24, 2018)

##### BUGFIXES

- Improved scrolling in the help tour on the tour builder page (parameters generator).
- Fixed a situation in which there was a search for a non-existent object and error display in the debager.
- Corrected positioning of the message in conditions of lack of space at the top or bottom of the target block.

#### Version 2.7 (November 23, 2018)

##### BUGFIXES

- Fixed positioning of the highlighting when scrolling the page while waiting for the hidden item to appear.

#### Version 2.6 (November 22, 2018)

##### BUGFIXES

- Fixed the problem of incorrect display of steps in the checklist on devices with a small screen height

#### Version 2.5 (November 22, 2018)

##### NEW FEATURES

- Added new parameter "bgColor". Global background color of the message block.
- Added new sub-parameter "bgColor" for the parent parameters: intro, continue, tourMap and steps.
- Added new parameter "titleColor". Global title color of the message block.
- Added new sub-parameter "titleColor" for the parent parameters: intro, continue, tourMap and steps.
- Added new parameter "modalContentColor". Content color of the intro message block.
- Added new sub-parameter "modalContentColor" for the parent parameters: intro, continue and steps.
- Added new parameter "modalTypeColor". Global modal type color of the message block.
- Added new sub-parameter "modalTypeColor" for the parent parameters: intro and continue.
- Added new parameter "paginationColor". Global pagination color of the message block.
- Added new sub-parameter "paginationColor" for the parent parameter: steps.
- Added new parameter "timerColor". Global timer color of the message block.
- Added new sub-parameter "timerColor" for the parent parameter: steps.
- Added new parameter "btnColor". Global buttons color.
- Added new sub-parameter "btnColor" for the parent parameters: intro, continue, tourMap and steps.
- Added new parameter "btnHoverColor". Global buttons hover color.
- Added new sub-parameter "btnHoverColor" for the parent parameters: intro, continue, tourMap and steps.
- Added new sub-parameter "itemColor" for the parent parameter: tourMap. Item color of the Checklist
- Added new sub-parameter "itemHoverColor" for the parent parameter: tourMap. Item hover color of the Checklist
- Added new sub-parameter "itemActiveColor" for the parent parameter: tourMap. Item Active color of the Checklist
- Added new sub-parameter "itemActiveBg" for the parent parameter: tourMap. Item Active BG color of the Checklist
- Added new sub-parameter "itemNumColor" for the parent parameter: tourMap. Item Number color of the Checklist
- Added new sub-parameter "checkColor" for the parent parameter: tourMap. Check color of the Checklist
- Added new sub-parameter "checkReadyColor" for the parent parameter: tourMap. Check Ready color of the Checklist

##### CHANGES

- In connection with the emergence of new style control parameters, from the package removed themes: light, dark, aero, violet, snow, club

#### Version 2.4 (November 17, 2018)

##### BUGFIXES

- Fixed bug with using destroy method together with tour without steps.

#### Version 2.3 (November 13, 2018)

##### NEW FEATURES

- Added new theme "Neon". The old "Neon" theme is no longer in the archive.
- Added new theme "Violet". The old "Violet" theme is no longer in the archive.

#### Version 2.2 (November 9, 2018)

##### NEW FEATURES

- Added new theme "Material"
- Added the transfer of the target object in the functions: before, during, after.
- Improved work with multi-page tours. Accounted for more options toggle between pages.

#### Version 2.1 (November 5, 2018)

##### NEW FEATURES

- Added additional automatic scrolling of the page in order to maximally place an object and a block with a large message in the screen.
- Added new demo "test-large-message". For Large content testing.
- Added new demo "snippet-check-fields". For required fields.
- Added new sub-parameter "width" into the parameters of intro. This parameter set the width of the intro message block.
- Added new sub-parameter "width" into the parameters of continue. This parameter set the width of the continue message block.

#### Version 2.0 (November 4, 2018)

##### NEW FEATURES

- Added new parameter "toggle" for method "map".
- Added new theme "Relate"
- Added control by arrows on the keyboard. Left - the previous step, right - the next step.
- Added parameter "keyboard" to enable / disable the ability to control the tour using the keyboard.

#### Version 1.11 (November 3, 2018)

##### NEW FEATURES

- Added automatic scrolling in the block with a list of steps to ensure that the active step is always visible.
- Improved automatic search for the best position of the message for blocks with a high height.
- Added the transfer of the target object in the function heckNext, chechPrev.

#### Version 1.10 (October 30, 2018)

##### NEW FEATURES

- Added new parameter "loc". Global path to the page on which the step should work. Used to link a tour to a specific page.
- Added new parameter "timer". Global time value after which the tour automatic switching to the next step.

#### Version 1.9 (October 30, 2018)

##### NEW FEATURES

- Added new parameter "spacing". This parameter set the global indent highlighting around the element.
- Added new parameter "width". This parameter set the global width of the message block.
- Added new parameter "shapeBorderRadius". Global corner radius of rounded rectangle shape.
- Added new parameter "shape". This parameter set the global shape of highlighting.

##### BUGFIXES

- Fixed a bug causing incorrect calculation of the z-index of dynamic elements.

#### Version 1.8 (October 29, 2018)

##### NEW FEATURES

- Added new sub-parameter "width". This parameter sets width of the message block for a specific step.

#### Version 1.7 (October 28, 2018)

##### CHANGES

- A part of the logic was rewritten in order to make the plugin more flexible to extend the functionality.

#### Version 1.6 (October 27, 2018)

##### NEW FEATURES

- The plugin code from this day provide for the declaration of numerical values of parameters in brackets, as string value.
- Added sub-parameter "waitElementTime". This parameter sets the time (ms) to wait for an item to appear
- Added sub-parameters "checkNext" and "checkPrev". Functions in which you can carry out any verification by clicking on the "Next" or "Prev" button.
- Saving the progress of the tour after updating the page
- Added the ability to continue the tour after refreshing the page.

#### Version 1.5 (May 24, 2018)

##### BUGFIXES

- Fixed bug of calculating the coordinates of the highlighted area.

#### Version 1.4 (April 27, 2018)

##### NEW FEATURES

- Added a warning message when the plugin is working on local pages in the browser Internet Explorer 11 and highest.

#### Version 1.3 (April 19, 2018)

##### NEW FEATURES

- In a files set added WordPress version of plugin
- Added chrome extension, which gets an unique selector code for any element on the page
- Innovation. To display a message in the center, do not specify the target
- Added iGuider Builder

#### Version 1.2 (April 05, 2018)

##### NEW FEATURES

- Changes have been made to the processing of the values for the parameters "cover"

#### Version 1.1 (January 12, 2018)

##### NEW FEATURES

- Added new rectangle shape with rounded corners

#### Version 1.0 (November 27, 2017)

##### Release