jQuery BabySteps スライド切り替え時に処理を加える

このプラグインでは、以下の用意されている関数で２つの用意したスライドを遷移できるようにしてくれます。

// slide1とslide２は紐付けたいスライドのセレクタを指定
 var slide１ = $('#hoge1');
 var slide2 = $('#hoge2');
 slide１.bindStep(slide2)

今回開発している際、スライド遷移のときに独自のバリデートを通したいときやスライドを変えたタイミングで何か別の関数の関数を通したい時がありました。そんなときは、以下のように、デフォルト関数を書き換えてあげると良いです。

  $.fn.bindStep.defaults.transition = function(currStep,nextStep){
　　　　// デフォルト関数
          currStep.hide();
          nextStep.show();
　　　　// 追加する関数
         　test_action();
        }

$.fn.bindStep.defaultsのデフォルトの中身は以下のようになっていて、今回はnextBtn、prevBtn、nextValidator、transitionなどを書き替えました。

//jquery.babysteps.js
$.fn.bindStep.defaults = {
    //Path to your next button image
    nextBtn         :   '',
    //Path to your previous button image
    prevBtn         :   '',
    //When binding next step, should a previous button be bound?
    bindPrev        :   true,
    /**
     * Validation callback called when 'next' is clicked
     * Validator should return Boolean
     * Make sure you output your error messages!
     */
    nextValidator   :   function(){return true;},
    /**
     * Transition between steps; function(thisStep,nextStep)
     * @params - currStep - jQuery reference to the step that is binding
     * @params - nextStep - jQuery reference to the step that is being bound
     */
    transition      :   function(currStep,nextStep){
      currStep.hide();
      nextStep.show();
    },
    /**
     * How to lay the button out over/within the step container
     * @params - step - jQuery reference to step container
     * @params - imgBtn - Markup containing button
     * @params - imgType - 'next' or 'prev'
     */
    layoutButton    :   function(step,imgBtn,imgType){
      if(imgType=='next' || imgType=='prev'){
        step.append(imgBtn);
      }
    },
    /**
     * Generate the HTML to wrap the Image
     * @params - id1 - id that transition is bound to, could be used for container like div, or whatever
     * @params - id2 - id for the image, if you used id1 for the image, then just ignore id2
     * @params - img - image path
     */
    generateMarkup  :   function(id1,id2,img){
      return([
        '<div ',
        'id="', id1, '" ',
        '>',
        '<img ',
        'src="', img, '" ',
        'id="', id2 , '" ',
        '/>',
        '</div>'
      ].join(''));
    }
  };