How to pinch to zoom image in the Slider?

Ionic Framework ionic-v3
1

i am using the example in :
https://github.com/driftyco/ionic2/tree/master/ionic/components/slides/test/basic

And i want to pinch to zoom the image in the Slider so that i add the class ion-scroll-zoom in the slides. But it seems not work.

<ion-slides [options]="extraOptions" id="slider" style="background-color: black" class="ion-scroll-    zoom">
  <ion-slide *ngFor="#image of images">
   <img data-src="{{getImageUrl(image)}}" slide-lazy>
  </ion-slide>
</ion-slides>
4 Likes
2

Any success with this?

3

Will be available with beta.7

:thumbsup:

4

Hi there,
Is this feature included yet? We are on 8 now and still can’t see it.

5

+1. I also need this feature. Will it be available ?

6

@ghprod any updates on this?

1 Like
7

In the Slides API documentation we can see a zoom input property.

Unfortunately, I’ve not tried it yet.

8

The zoom property is not working in 3.0.1

9

I`m also looking for it all over the web. But nothing seems to work.

1 Like
10

Hello all,
Any update on this topic,
i am having same issue.
i applied zoom property on ion-slides tag, but error comes when try to zoom image

TypeError: Cannot read property 'getAttribute' of null
at toggleZoom (swiper-zoom.js:364)

Code:

<ion-slides pager="true" style="height:45%" zoom>
    <ion-slide *ngFor="let slide of selProd.productImages">
      <img src="{{slide.image}}">
    </ion-slide>
  </ion-slides>
11

zoom = “true” will get it work

12

@saintxiao I used same code with zoom="true", but the fallowing error occurred to me.
TypeError: Cannot read property 'getAttribute' of null

  <ion-card>
        <ion-slides pager="true" style="height:auto" dir="rtl" zoom="true">
        <ion-slide *ngFor="let images of post.attachLists ">
        <img src="{{images.filename}}" style="height:auto">
        </ion-slide>
      </ion-slides>
      </ion-card>
13

I managed to get the zoom working by wrapping the image with .swiper-zoom-container class. But still I can’t move the position of the image when zooming. It’s zoomed to the center.

   <ion-slides class="slider-inner" pager="true" paginationType="bullets" loop="true" zoom="true">
      <ion-slide *ngFor="let item of property.pics">
        <div class="swiper-zoom-container">
          <img class="img-holder" data-src="{{item}}" slide-lazy>
        </div>
      </ion-slide>
    </ion-slides>

Anyone else having the same issue? Found a fix?

14

HI, I am having same issue in Ionic 4, someone have found how to fix it?