Trip.js

What is Trip.js ?

Trip.js is a useful plugin that can help you customize a tutorial trip easily. ( Based on jQuery )

Setup ( Minimal )

1. Include jQuery ( has to check version later )

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Include src/trip.css

   <link type="text/css" rel="stylesheet" href="src/trip.css">

3. Include src/trip.js

   <script type="text/javascript" src="src/trip.js"></script>

4. Setup Trip.js

   var trip = new Trip([
      { 
          sel : $('#element1'),
          content : 'This is element 1'
      },
      {
          sel : $('#element2'),
          content : 'This is element 2'
      }
   ], options); // details about options are listed below

5. Take a Trip Now !

   $(document).ready(function({
       trip.start();
   });

Setup for Demo Tour

$(document).ready(function() {
    var trip = new Trip([
        { 
            sel : $('.step1'), 
            position : 'n', 
            content : 'Hi, I am Trip.js', 
            delay : 2000,
            callback : function(i) {
                console.log("step "+ i +" is finished");
            }
        },
        {
            sel : $('.step2'),
            position : 'e',
            content : 'This is a plugin that can help you make hint flow easily !',
            delay : 3000,
            callback : function(i) {
                console.log("step "+ i +" is finished");
            }
        },
        {
            sel : $('.step3'),
            position : 'n',
            content : 'Can be placed in many directinos - North',
            delay : 2000
        },
        {
            sel : $('.step4'),
            position : 'e',
            content : 'East',
            delay : 2000
        },
        {
            sel : $('.step5'),
            position : 'w',
            content : 'West',
            delay : 2000
        },
        {
            sel : $('.step6'),
            position : 's',
            content : 'South',
            delay : 2000
        },
        {
            sel : $('.step7'),
            position : 'n',
            content : 'One more thing, plz read this !',
            expose : true,
            delay : 7000
        }
    ], {
        onTripStart : function() {
            console.log("onTripStart");
        },
        onTripEnd : function() {
            console.log("onTripEnd");
        },
        onTripStop : function() {
            console.log("onTripStop");
        },
        backToTopWhenEnded : true,
        delay : 2000
    });
 
    $(".start-tour").click(function() {
        trip.start(); 
    });
});

Global Options

• tripIndex

  You can set tripIndex ( start from 0 ) to specific trip block at start.

  Default : $.noop

• onTripStart

  You can set a callback function triggered when the trip starts.

  Default : $.noop

• onTripEnd

  You can set a callback function triggered when the trip ends.

  Default : $.noop

• backToTopWhenEnded

  You can ask Trip.js go back to top when ended.

  Default : false

• overlayZindex

  You can set the basic zIndex for overlay if you want to expose elements.

  Default : 99999

• enableKeyBinding

  You can decide to bind key events for trip navigations or not.

  Default : true

• delayPeriod

  every trip will be lived for 1 second (1000 ms) by default

  Default : 1000

Local Options

You can setup specific options for each step.

• sel *Required*

  Which selector is referenced in this step.

  Default : no default

• content *Required*

  What information that you want to show to users.

  Default : no default

• position

  What position would you prefer for the tripBlock.

  Default : n( You can use e, w, n, s four positions )

• delay

  You can delay longer / shoter for this step. You can assign delay in global options to change the default delay.

  Default : 1000

• callback

  You can do whatever you want to do after this step passed. BTW, Trip.js will assign the current tripIndex (start from 0) as the first parameter back to your callback function for later use.

  Default : $.noop

Key Binding

• Right and Down arrows

  Go to next trip

• Left and Up arrows

  Go back to previous trip

• Space

  pause / continue

• Esc

  Stop

API

• trip.start()

  Call this method to start your trip

• trip.stop()

  Call this method to stop your trip

• trip.pause()

  Call this method to pause/continue your trip

• trip.next()

  jump to next step

• trip.prev()

  jump back to previous step