Support tours that span multiple pages

[cweagans]

If the tour starts on page1.html, the tour would go through all defined tour steps. I'd like to see a new option that can be passed in that would allow the last step to have a "Next" button with a javascript callback.

This callback could be a simple window.location() call to go to page2.html (which would have a different set of tour steps on it), or it could be a function that loads new content into the page (example use case: the administrative overlay in Drupal 7, or any rich client application built on backbone or similar).

Alternatively, each tour step could optionally define a Javascript function to execute when the next or previous button is clicked.

[pkiula]

Same here. Would love to have this feature!

[mrsweaters]

Couldn't you just use the postStepCallback or postRideCallback configurations?

[digitalmaster]

Me too!! I thought that was what the cookieMonster option was for, but apparently not. Couldn't find any documentation on using JoyRide with cookies other than how to enable it.

Shouldnt be too bad to implement this manually, but would be great if it were a feature.

[yonibaciu]

You can use the postRideCallback but keep in mind that you don't want to jump to the next page if the tour was cancelled so you need to do something like:

    $("#joyride_tour").joyride({
      postRideCallback: function(index) {
        if (index == $('#joyride_tour li').length - 1)
        {
          window.location = '/next_url_in_tour';
        }
      }
    });

The only issue here is if the user cancelled on the last step.

[digitalmaster]

I was actually able to solve this issue very easily by using postRideCallback and cookies.

Write function that creates a cookie:

var tour_seen = function(){
  $.cookie('tour_seen', 'TRUE', {expires: 365});
}

So on first page use the callback to create a cookie. (Note: Depending on your individual case you could also just create this cookie right before you start the tour without using the callback) :

$("#first_tour").joyride({
  postRideCallback: tour_seen
});

On the second page check for this cookie before running tour:

if( $.cookie('tour_seen') == TRUE){
  //Start (continued) tour
  $("#second_tour").joyride();
}

Worked for me. Good luck!