Disable swiper during image zoom

Question

I want to be able to pinch zoom on a device into an image embedded inside a Swiper (http://idangero.us/swiper/) element within my ionic app.

With the code below I am able to zoom into the image but $scope.slider.lockSwipes() locks the X-axis from any kind of use and without it the next slide is triggered when attempting to scroll the X-axis with one finger.

(If you are unfamiliar with ionic: ion-slides is built upon Swiper).

Help would be most appreciated.

Template:

 <ion-slides options="options" slider="data.slider">
  <ion-slide-page ng-repeat="map in maps">
    <div class="callout {{map.name}}">
      <ion-scroll
        zooming="true"
        direction="xy"
        delegate-handle="zoom-pane"
        class="zoom-pane"
        min-zoom="1"
        max-zoom="15"
        overflow-scroll="false"
        on-release="onRelease()">
          <img src="{{map.image}}"></img>
    </div>
  </ion-slide-page>
</ion-slides>

Script:

 $scope.options = {
  loop: true,
  effect: 'slide',
  speed: 500
 }

$scope.onRelease = function(e) {
  var scrollDelegate = $ionicScrollDelegate.$getByHandle('zoom-pane');
  var view = scrollDelegate.getScrollView();
  var scale = view.__zoomLevel;
  // disable swiping between slides when zoom is active
  if (scale > 1){
    $scope.slider.lockSwipes();
  }
  else{
    $scope.slider.unlockSwipes();
  }
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

Wonjae Lee Wonjae Lee · Accepted Answer · 2017-03-01T10:00:43

I used lockSwipe() as below.

var zoom = $ionicScrollDelegate.$getByHandle('scrollHandle' + $scope.activeIndex).getScrollPosition().zoom;
if (zoom === 1) {
    if ($scope.isSwipeLocked == true) {
        $scope.slider.unlockSwipes();
        $scope.isSwipeLocked = false;
    }
} else {
    if ($scope.isSwipeLocked == false) {
        $scope.slider.lockSwipes();
        $scope.isSwipeLocked = true;
    }
}

In my case, when image is zoomed, ion-slide on X-axis is also locked.

Disable swiper during image zoom

Template:

Script:

1 Answers