Zoom in ionic slides


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.


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>

i am using image viewer pugin



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


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

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.


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


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


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