Slider zoom is not working in v2 final


#1

I want to zoom slide so I am using following code, but it’s not working

<ion-slides [pager]='true' [zoom]='true'>
    <ion-slide *ngFor="let image of product.details.images">
      <img src="{{image.popup}}"  />
    </ion-slide>
  </ion-slides>

#2

Slides do not support zoom, and have not supported zooming even before 2.0 final.


#3

As per document it’s supported in 2


#4

That’s fine, but then I am confused: why does the documentation talk about a ‘zoom’ input property of here? Why are there two bug reports about this? Please let me know if you want help updating your documentation to remove the ‘zoom’ option or if the team wants help in implementing zoom in slides – slides would be much more useful with that feature because in hybrid apps, you cannot target a single device size (often) and need to cater to a variety of not only display sizes but also reader eyes - some of the older folks have complained to me about my slides that they cannot read them.

Thanks! And I’d be happy to help on either of those two fronts: getting rid of zoom from the documentation or implementing it – but the way it stands right now is confusing.


#5

Hi mhartington… Any updates on this???


#6

I agree with doron. I invested few hours just to find it is not supported. Please update the documentation asap


#7

There actually is code doing zooming stuff in there:
https://github.com/driftyco/ionic/edit/master/src/components/slides/slides.ts
If an how it works, I can’t answer…


#8

I actually tried to implement it yesterday on V3.0.1 and it seemed to work. It had some glitches though, so I removed it again (it didn’t feel as it should be yet).


#9

Zoom is working in slider

You will need to add class “swiper-zoom-container” in your element, zoom is working but it’s zoomed from center only…

<ion-slides [pager]='true' [zoom]='true'>
    <ion-slide>
      <div class="swiper-zoom-container"><img src="assets/img/image.jpg"></div>
    </ion-slide>
</ion-slides>

#10

Thanks for posting a solution. I can confirm that this solution works, but seems buggy. I am testing on IOS 10.
I’m noticing the following issues:

  1. If you zoom an image and then pan to the next image, the next slide image overlays the zoomed image
  2. At other times, if you zoom and image, it goes back to un-zoom the moment you release the pinch

1 & 2 randomly happen - there doesn’t seem to be a definitive pattern.

Have you experienced this issue?


#11

I’ve never gotten it to work, unfortunately. (Ionic 3.5.0 on iOS 10.3 WKWebView)


#12

Ok. I am not using WKWebView (I couldn’t get it to load local images stored by cordova file and did not want to start installing web servers just so I can show an image).

Anyway, here is a video of what I mean:

Try 1) - pinch and zoom kept resetting
Try 2) - pinch and zoom worked and next slide overlays

My modal code:

<ion-content>

  <ion-fab top right >
    <button ion-fab mini color="secondary" (click)="removeModal()"><ion-icon name="close" ></ion-icon></button>
  </ion-fab>


  <ion-slides [pager]='true' [zoom]='true'>
    <ion-slide *ngFor="let photo of item.photo">
      <div class="swiper-zoom-container"><img src={{getFullPath(photo)}} /></div>
    </ion-slide>
  </ion-slides>
</ion-content>

#13

I got the same issue on android platform