color style 02 | iGuider Product Tour

Source

<script src="../js/jquery-3.1.1.min.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>
$(window).on('load',function(){
	$('.start-tour').on('click',function(){
		iGuider({
			tourTitle:'color-style-02',
			
			modalContentColor:'#808080',
			modalTypeColor:'#c0c0c0',

			titleColor:'#ffbe00',
			
			btnColor:'#ffbe00',
			btnHoverColor:'#ff9c00',
			
			timerColor:'#000',
			
			timer:'4000',
			intro:{
				cover:'../doc_files/images/image-01.jpg'
			},
			continue:{
				cover:'../doc_files/images/image-02.jpg'
			},
			tourMap: {
				open:true,

				itemColor:'#808080',
				itemHoverColor:'#ff9c00',
				
				itemActiveColor:'#000',
				itemActiveBg:'#ffde00',

				checkReadyColor:'#ffbe00'
			},
			
			steps:[
			
			/*step 01*/
			{
				cover:'../doc_files/images/image-03.jpg',
				
				title:'Step 1 title',
				content:'Lorem Ipsum is simply dummy text of the printing.',	
				
				target:'el-1'
			},
			
			/*step 02*/
			{			
				title:'Step 2 title',
				content:'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
				
				target:'el-2'
			},
			
			/*step 03*/
			{				
				title:'Step 3 Latin words, combined with a handful of model sentence structures',		
				
				target:'el-3'
			},
			
			/*step 04*/
			{	
				content:'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy.',		
				
				timer:false,
				target:'el-4'
			}]
		});
		return false;
	}).trigger('click');
})
</script> 

<p><a class="btn start-tour" href="#">Start Tour</a></p>

<span class="custom-element" data-target="el-1">Element 1 </span>	
<span class="custom-element" data-target="el-2">Element 2 </span>	
<span class="custom-element" data-target="el-3">Element 3 </span>	
<span class="custom-element" data-target="el-4">Element 4 </span>