CODEWITHSUNDEEP
javascriptjquerycsszoomingpinchzoom
Rahul Sharma
Rahul Sharma

Reputation: 8312

How to prevent Pinch IN Zooming of Image using Pinchzoom.js

So I have this scenario where I am using Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link. When you will PINCH IN, you will observe that the image zooms OUT but after the gesture has ended, it retains its original size. I wanted to ask if there is a way to disable this zooming out effect? My PinchZoom settings are as:

    Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
        new PinchZoom.default(el, {
            tapZoomFactor: 5,
            maxZoom: 10,
            use2d: true,
            verticalPadding: 1,
            draggableUnzoomed: false
        });
    });

Upvotes: 1

Views: 2141

Answers (2)

Manish
Manish

Reputation: 962

You need to add the property which will tell the minimum zoom size. In Pinchzoom.js library there is minZoom property for that.

So if you don't want your image to be zoomed out on pinch-in then set minZoom:1.

I tried this settings by adding minZoom property to the demo link and it was working correctly.

Array.from(document.querySelectorAll('.myimages-container')).forEach(function (el) {
        new PinchZoom.default(el, {
            tapZoomFactor: 5,
            maxZoom: 10,
            minZoom:1,
            use2d: true,
            verticalPadding: 1,
            draggableUnzoomed: false
        });
    });

If this solution is not working for you then maybe this is the problem is with your element selection.

Use container <div> as the parent of your every image and then apply settings to that parent <div>.

<div class="myimages-container">
<img src="my_image.jpg"></img>
</div>

Upvotes: 1

Pedro Ludovico Bozzini
Pedro Ludovico Bozzini

Reputation: 412

Try setting the property minZoom to 1.

This effect happens because it allows you to zoom out to a size that is smaller than your screen, so the browser scale it back so it fits the whole phone width.

Upvotes: 1

Related Questions