Zoom in ionic slides

Ionic Framework ionic-v3
1

Hello all,

I am developing a project for e-commerce, and in product-detail page,i have one slider with product images. in that user can zoom that image.

my html 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>

but when i try to zoom image by pinch or double tap. it gives me error:

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

Thank you.

2

i am developing similer app and my code is like this.

`

<div text-center>
        <ion-img style="width: 200px; height: 200px; max-width: 300px; max-height: 300px;" src="{{item.IMAGE}}" imageViewer="{{item.IMAGE}}"></ion-img>
        </div>

i am using image viewer pugin
link:-https://github.com/Riron/ionic-img-viewer

3

UPDATE

I have solved this issue by covering swiper-zoom-container in between ion-slide and img tag

Example:

<ion-slides pager="true" style="height:45%" zoom>
    <ion-slide *ngFor="let slide of productImages">
      <div class="swiper-zoom-container">
        <img src="{{slide}}">
      </div>
    </ion-slide>
  </ion-slides>
6 Likes
4

Hi , thanks for your solution.

I put swiper-zoom-container , it is working. but the question is when you pinch the image you can zoom it, but if you release , it will back to normal scale of image, do you have same issue and how you solve this? thanks.

5

I still can zoom anywhere in the image. It zooms right at the center when I pinch zoom. Do you have the same issue?

@Jamesionic Yeah it zooms out for me too

6

i also have same issue … any one got solution of this ??

7

Same issue here, Once you leave the image goes back to original state/size