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.
<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>
$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;
});
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.