From d0af847ee05716fbb076fa7171ddae2acece26e2 Mon Sep 17 00:00:00 2001
From: Gurvinder Singh <gurvinder.pal.singh@gmail.com>
Date: Tue, 9 Apr 2013 15:02:11 -0700
Subject: [PATCH 1/2] Option to show step counters like 1 of 5 on each step

---
 joyride-2.0.3.css       |  6 ++++++
 jquery.joyride-2.0.3.js | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/joyride-2.0.3.css b/joyride-2.0.3.css
index 8b7f3f2..8d0ff84 100644
--- a/joyride-2.0.3.css
+++ b/joyride-2.0.3.css
@@ -255,3 +255,9 @@ body {
     top: 0px;
     left: 0px;
 }
+
+.joyride-counter {
+    color: #BBBBBB;
+    float: right;
+    font-size: 14px;
+}
diff --git a/jquery.joyride-2.0.3.js b/jquery.joyride-2.0.3.js
index 6f3d683..11b5f81 100755
--- a/jquery.joyride-2.0.3.js
+++ b/jquery.joyride-2.0.3.js
@@ -36,6 +36,7 @@
       'postRideCallback'     : $.noop,    // A method to call once the tour closes (canceled or complete)
       'preStepCallback'      : $.noop,    // A method to call before each step
       'postStepCallback'     : $.noop,    // A method to call after each step
+      'showStepCounter'      : true,      // To show step counter like 1 of 5 on each step
       'template' : { // HTML segments for tip layout
         'link'    : '<a href="#close" class="joyride-close-tip">X</a>',
         'timer'   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
@@ -44,7 +45,8 @@
         'button'  : '<a href="#" class="joyride-next-tip"></a>',
         'modal'   : '<div class="joyride-modal-bg"></div>',
         'expose'  : '<div class="joyride-expose-wrapper"></div>',
-        'exposeCover': '<div class="joyride-expose-cover"></div>'
+        'exposeCover': '<div class="joyride-expose-cover"></div>',
+        'step_counter' : '<div class="joyride-counter"></div>'
       }
     },
 
@@ -170,7 +172,17 @@
             methods.hide();
             methods.show();
             }
-      }, 
+      },
+
+      steps_html : function (opts) {
+        var step_counter;
+        if (settings.showStepCounter) {
+          step_counter = $(settings.template.step_counter);
+          step_counter.append((opts.index+1) + ' of '+ $($(opts.li).parent()).children('li').size()) ;
+          return methods.outerHTML(step_counter[0]);
+        }
+        return '';
+      },
 
       tip_template : function (opts) {
         var $blank, content, $wrapper;
@@ -180,6 +192,7 @@
         $blank = $(settings.template.tip).addClass(opts.tip_class);
         content = $.trim($(opts.li).html()) +
           methods.button_text(opts.button_text) +
+          methods.steps_html(opts) +
           settings.template.link +
           methods.timer_instance(opts.index);
 

From 6a58947e1bf274f7db1166672c5209eb0f593d71 Mon Sep 17 00:00:00 2001
From: Gurvinder Singh <gurvinder.pal.singh@gmail.com>
Date: Tue, 9 Apr 2013 15:13:23 -0700
Subject: [PATCH 2/2] A new callback which will be called when joyride is
 cancelled I needed it to show a message to user on how they can get back to
 the joyride by clicking a link on the page.

---
 jquery.joyride-2.0.3.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/jquery.joyride-2.0.3.js b/jquery.joyride-2.0.3.js
index 11b5f81..a74682e 100755
--- a/jquery.joyride-2.0.3.js
+++ b/jquery.joyride-2.0.3.js
@@ -36,6 +36,7 @@
       'postRideCallback'     : $.noop,    // A method to call once the tour closes (canceled or complete)
       'preStepCallback'      : $.noop,    // A method to call before each step
       'postStepCallback'     : $.noop,    // A method to call after each step
+      'postCancelCallback'   : $.noop,    // A method to call after joyride is cancelled
       'showStepCounter'      : true,      // To show step counter like 1 of 5 on each step
       'template' : { // HTML segments for tip layout
         'link'    : '<a href="#close" class="joyride-close-tip">X</a>',
@@ -128,6 +129,7 @@
             settings.$document.on('click.joyride', '.joyride-close-tip', function (e) {
               e.preventDefault();
               methods.end();
+              settings.postCancelCallback(settings.$li.index(), settings.$current_tip);
             });
 
             settings.$window.bind('resize.joyride', function (e) {