Multiple pages tour (page 3)

Basic setup tour consisting of 3 steps.

This is the last page of the multiple pages tour. This tour will run once the page is loaded by using the method trigger 'run'.

Page 1 - Page 2 - Page 3

 

More help: Tour triggers

Example blocks

Demo box 1

(hookTo)

Demo box 2

(hookTo)

Demo box 3

(hookTo)

Source code

Install | Documentation 
<!-- PowerTour core stylesheet(required) -->        
<link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>

<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>

<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/powertour/animate.min.css"/>

<!-- jQuery core (required) -->
<script src="js/assets/jquery-1.12.3.min.js"></script>

<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.lite.3.1.0.min.js"></script>


Setup | Documentation 
$.powerTour({
    tours : [
        {
            trigger            : '#powertour-demo-trigger-id',
            startWith          : 1,
            easyCancel         : true,
            escKeyCancel       : true,
            scrollHorizontal   : false,
            keyboardNavigation : true,
            loopTour           : false,
            highlightStartSpeed: 200,
            highlightEndSpeed  : 200,
            onStartTour        : function(ui){ },
            onEndTour          : function(ui){ },	
            onProgress         : function(ui){ },
            steps : [
                  {
                      hookTo          : '#powertour-demo-box-1',
                      content         : '#step-id-1',
                      width           : 400,
                      position        : 'bm',
                      offsetY         : 20,
                      offsetX         : 0,
                      fxIn            : 'flipInX',
                      fxOut           : 'bounceOutLeft',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-2',
                      content         : '#step-id-2',
                      width           : 300,
                      position        : 'lt',
                      offsetY         : 0,
                      offsetX         : 20,
                      fxIn            : 'fadeIn',
                      fxOut           : 'fadeOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : true,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-3',
                      content         : '#step-id-3',
                      width           : 400,
                      position        : 'tr',
                      offsetY         : -80,
                      offsetX         : 40,
                      fxIn            : 'rotateIn',
                      fxOut           : 'rotateOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  }		
            ]
        }
    ]
});

// trigger the tour
$.powerTour('run');


Steps | Documentation 
<div class="single-step" id="step-id-1">
    <h3>Step one</h3>
    <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
    <br/>
    <a href="#" data-powertour-action="next">Next step...</a>
</div>

<div class="single-step" id="step-id-2">
    <h3>Step two</h3>
    <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step</a>
    <a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>

<div class="single-step" id="step-id-3">
    <h3>Step three</h3>
    <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step...</a>
    <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>


Complete 
<html>
<head>       
        
    <!-- PowerTour core stylesheet(required) -->        
    <link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>
    
    <!-- PowerTour styling stylesheet (optional) -->
    <link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>
    
    <!-- CSS3 animations stylesheet(needed for animations) -->
    <link rel="stylesheet" href="css/powertour/animate.min.css"/>
    
    <!-- jQuery core (required) -->
    <script src="js/assets/jquery-1.12.3.min.js"></script>
    
    <!-- PowerTour plugin (required) -->
    <script src="js/powertour/powertour.lite.3.1.0.min.js"></script>

    <script>	
        $(document).ready(function($){
            $.powerTour({
                tours : [
                    {
                        trigger            : '#powertour-demo-trigger-id',
                        startWith          : 1,
                        easyCancel         : true,
                        escKeyCancel       : true,
                        scrollHorizontal   : false,
                        keyboardNavigation : true,
                        loopTour           : false,
                        highlightStartSpeed: 200,
                        highlightEndSpeed  : 200,
                        onStartTour        : function(ui){ },
                        onEndTour          : function(ui){ },	
                        onProgress         : function(ui){ },
                        steps : [
                              {
                                  hookTo          : '#powertour-demo-box-1',
                                  content         : '#step-id-1',
                                  width           : 400,
                                  position        : 'bm',
                                  offsetY         : 20,
                                  offsetX         : 0,
                                  fxIn            : 'flipInX',
                                  fxOut           : 'bounceOutLeft',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-2',
                                  content         : '#step-id-2',
                                  width           : 300,
                                  position        : 'lt',
                                  offsetY         : 0,
                                  offsetX         : 20,
                                  fxIn            : 'fadeIn',
                                  fxOut           : 'fadeOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : true,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-3',
                                  content         : '#step-id-3',
                                  width           : 400,
                                  position        : 'tr',
                                  offsetY         : -80,
                                  offsetX         : 40,
                                  fxIn            : 'rotateIn',
                                  fxOut           : 'rotateOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              }		
                        ]
                    }
                ]
            });
            
            // trigger the tour
            $.powerTour('run');	
    
        });
    </script>

</head> 
<body> 

	<!-- hookTo -->
    
    <div class="powertour-demo-box" id="powertour-demo-box-1">
        <p>Demo box 1</p>
        <span>(hookTo)</span>
    </div>    

    <div class="powertour-demo-box" id="powertour-demo-box-2">
        <p>Demo box 2</p>
        <span>(hookTo)</span>
    </div> 
     
    <div class="powertour-demo-box" id="powertour-demo-box-3">
        <p>Demo box 3</p>
        <span>(hookTo)</span>
    </div> 
    
    <!-- steps(content) --> 
    
    <div class="single-step" id="step-id-1">
        <h3>Step one</h3>
        <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
        <br/>
        <a href="#" data-powertour-action="next">Next step...</a>
    </div>
    
    <div class="single-step" id="step-id-2">
        <h3>Step two</h3>
        <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step</a>
        <a href="#" data-powertour-action="next" style="float:right">Next step</a>
    </div>
    
    <div class="single-step" id="step-id-3">
        <h3>Step three</h3>
        <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step...</a>
        <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
    </div>

</body> 
</html>

Step one

This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.


Next step...

Step two

This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.


Prev step Next step

Step three

This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.


Prev step... End tour