How can I implement pinch-in / pinch-out with Ionic?

Question

I use Ionic4 and Angular8.

I want to pinch-in / pinch-out the screen on a smartphone.

What i tried The following description has been added to index.html.

<meta name = "viewport" content = "viewport-fit = cover, width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 4.0, user-scalable = yes" />

But contrary to expectations, it did not work on the actual machine.

I also tried.

The following has been added to .

scrollX = "true"

Then you can now pinch-in / pinch-out the screen on your smartphone. But I don't know why or why.

Also, if the height of is large enough to require vertical scrolling I cannot scroll horizontally after pinch-in the screen.

I don't know why. I want to make horizontal scrolling work after screen enlargement.

Please let me know if anyone knows how.

Answer 1

You can use Pinch zoom for Angular .

The module provides opportunities for image zooming in, zooming out and positioning with use of gestures on a touch screen.

Check out live demo . its easy to install .

1 - Install the npm package.

npm i ngx-pinch-zoom

2 - Import module in you ts . like home.module.ts:

import { PinchZoomModule } from 'ngx-pinch-zoom';

@NgModule({
    imports: [ PinchZoomModule ]
})

3 - in your html

<pinch-zoom>
    <img src="path_to_image" /> 
</pinch-zoom>

Answer 2

In my case abusing the ion-slides was perfectly fine when using just one image that I want to enlarge / pinch-to-zoom. It also supports double tap, which gives it a smoother flavour of using it.

using vue and ionic for example:

<template>
...
        <ion-slides :options="sliderOptions" zoom>
          <ion-slide>
            <div class="swiper-zoom-container">
              <img :src="`${yourImageUrl}`" />
            </div>
          </ion-slide>
        </ion-slides>
...
</template>

if ur using options api, pass in the config object

let sliderOptions = {
  zoom: {
    maxRatio: 2,
  },
};

if you then build it and double tap the image or pinch-to-zoom

Answer 3

This works in ionic 4+. Tested on ionic 5.

Pinch to zoom on the entire page or specific div or on image.

You can do following.

<ion-content scrollX="true" scrollY="true">
...your content.
<ion-content>

Above method enables pinch to zoom on entire page on web. Not for mobile platforms.

For Mobile platforms. Install pinch to zoom from - http://ivylab.space/pinch-zoom

or npm i ngx-pinch-zoom

follow @AliGhassan Solution for remaining setup.

Now to enable pinch to zoom on entire web page, Set the html tags for ionic content as follows in your page.html file

<ion-content scrollX="true" scrollY="true">
   <pinch-zoom [properties]="zoomProperties">
     <ion-grid>
       ....contents.. 
     </ion-grid>
   </pinch-zoom>
</ion-content>

Create a variable for zoom properties as follows in page.ts file

zoomProperties = {
  "double-tap": true, // double tap to zoom in and out.
  "overflow": "hidden",// Am not sure. But Documentation says, it will not render elements outside the container.
  "wheel": false, // Disables mouse - To enable scrolling. Else mouse scrolling will be used to zoom in and out on web.
  "disableZoomControl": "disable", // stops showing zoom + and zoom - images.
  "backgroundColor": "rgba(0,0,0,0)" // Makes the pinch zoom container color to transparent. So that ionic themes can be applied without issues.
 }

Now, You should be able to pinch to zoom on mobile platforms as well.

If you are further interested, You can implement the same concept on an image or a div etc.

Thank you :)