0

I am developing an app using ionic v1.

I placed ion-slide-page in ion-slides and ion-scroll in ion-slide-page as shown below. This ion-scroll contains an image.

What I want to do is to keep the slide from moving left and right when the image is enlarged. (Like Facebook)

If I enlarge the image, I cannot scroll the image in X-axis.

Template:

<ion-slides options="options" slider="data.slider">
    <ion-slide-page ng-repeat="image in post.imgs">
        <ion-scroll
            direction="xy"
            scrollbar-x="false" scrollbar-y="false"
            zooming="true" min-zoom="1" max_zoom="3"
            overflow-scroll="false" locking="false" has-bouncing="true"
            style="width: 100%; height: 100%" class="vertical-center"
            delegate-handle="scrollHandle{{$index}}"
            on-release="updateSlideStatus()">
            <image style="width: 100%; height: 100%" ng-src="{{image}}"></image>
        </ion-scroll>
    </ion-slide-page>
</ion-slides>

Contorller:

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
    console.log('ionic slides initialized');
    $scope.slider = data.slider;
    $scope.activeIndex = 0;
    $scope.isSwipeLocked = false;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
    console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
    console.log('ionic slides change end');
    $scope.activeIndex = data.slider.activeIndex;
    $scope.previousIndex = data.slider.previousIndex;
});

$scope.updateSlideStatus = function() {
    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;
        }
    }
};

Is there any idea?

Wonjae Lee
  • 111
  • 1
  • 1
  • 8
  • Did you check whether `var zoom = $ionicScrollDelegate.$getByHandle('scrollHandle' + $scope.activeIndex).getScrollPosition().zoom;` actually returns a value? – Dexter Mar 02 '17 at 09:30
  • Yes. It returns 1.xxxxx~ when the image is enlarged. – Wonjae Lee Mar 02 '17 at 09:31

0 Answers0