Jquery Panzoom with UI slider and Flexslider

app.js

var App = {
  initialize: function() {
    // Initialize flexslider
    $flexSlider = self.$('#product-slider'),
      $flexSlider.flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        start: function(slider) {
          console.log('in start == slider.currentSlide ==>', slider.currentSlide);
          self.initZoom(slider, slider.currentSlide);
        },
        before: function(slider) {
          console.log('in before == slider.currentSlide ==>', slider.currentSlide);
          self.spinner.show();
          self.resetZoom();
        },
        after: function(slider) {
          console.log('in after == slider.currentSlide ==>', slider.currentSlide);
          self.initZoom(slider, (slider.currentSlide + 1));
          self.spinner.hide();
        }
      });
  },

  initZoom: function(sliderInst, currentSlideIndex) {
    var self = this;
    //console.log('slider',sliderInst);
    var $currentSlide = $(sliderInst.slides.eq(currentSlideIndex));
    //var imgToZoom = $currentSlide.find('.zoom-image');
    var allToZoom = self.$('.zoom-image');
    var zoomToSlider = self.$('#vertical-zoom-slider');
    allToZoom.panzoom({
      contain: false, //'invert',
      transition: false,
      duration: 500,
      minScale: 1,
      maxScale: 3,
      $zoomIn: self.$("#zoom-in-btn"),
      $zoomOut: self.$("#zoom-out-btn"),
      $reset: self.$(".reset"),
      onChange: function() {
        var matrix = $(this).panzoom('getMatrix');
        var zoomLevel = matrix[0];
        console.log('In onChange zoomLevel', zoomLevel);
        if (1 == zoomLevel) {
          self.$('.zoom-image').hide();
          self.$('.original-image').show();
        } else {
          self.$('.original-image').hide();
          self.$('.zoom-image').show();
        }
      },
      onReset: function() {
        //hide zoom image and show original
        console.log('In Reset');
        self.$('.original-image').show();
        self.$('.zoom-image').hide();
      }
    });

    zoomToSlider.slider({
      orientation: "vertical",
      range: "min",
      min: 1,
      max: 3,
      step: 0.05,
      slide: function(event, ui) {
        //console.log(ui.value);
        allToZoom.panzoom("zoom", ui.value, {
          silent: false
        });
      }
    });
    allToZoom.on('panzoomchange', function(e, panzoom, matrix) {
      //console.log('matrix[0]', matrix[0]);
      zoomToSlider.slider("value", matrix[0]);
    });
  },
  resetZoom: function() {
    var self = this;
    var zoomToSlider = self.$('#vertical-zoom-slider');
    self.$('.zoom-image').hide();
    self.$('.original-image').show();
    self.$('.zoom-image').panzoom("reset").panzoom("destroy");
    zoomToSlider.slider("destroy");
  },
};

App.initialize();

index.html

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-9 col-sm-10 r-padding-0 col-xs-height col-top">
      <div id="product-slider" class="slider">
        <ul class="slides">
          <li><img class="original-image" src="./1.jpg" /></li>
          <li><img class="original-image" src="./2.jpg" /></li>
          <li><img class="original-image" src="./3.jpg" /></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-3 col-sm-2 l-padding-0 col-xs-height col-top">
      <div id="zoom-actions-btn-group">
        <a id="zoom-in-btn" href="javascript:void(0)">+</a>
        <div id="vertical-zoom-slider" style="height:70px;"></div>
        <a id="zoom-out-btn" href="javascript:void(0)">-</a>
        <a class="reset" href="javascript:void(0)">Reset</a>
      </div>
    </div>
  </div>
  <!-- ./row-same-height -->
</div>
<!-- ./row -->