kingdido999 / zooming

🔍 Image zoom that makes sense.
https://kingdido999.github.io/zooming
MIT License
1.61k stars 121 forks source link

Grab Strength/Distance #333

Open DisabledAurora opened 2 years ago

DisabledAurora commented 2 years ago

Before you submit a feature request, please make sure to read through Documentation.

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

First and foremost, I have been using Zooming.js in my portfolio website, and it is truly amazing. But I have one small caveat.

In mobiles, when I try to zoom the images to the edges, or away from the centre, I am met with limited screen distance. the grab strength is not high to "accelerate" the images while being moved around. An example would be as followed:

Image in default screen (1880x888): image

Image being grabbed and then zoomed towards each edge in default screen (crosshair indicates the position of the cursor): image image image

By now you could have gotten a fair image of how my image is being grabbed and moved around (zoomed) in a large laptop screen. The problem comes when its a mobile: image image

Now, I was wondering if there was any way to increase the strength or move distance, with the same zoom level, meaning with a smaller finger movement, a larger distance moved by the image, so that it's possible to view the whole image.

my configuration for the above examples:

    <script>
        // Listen to images after DOM content is fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            new Zooming({
                // options...
                bgColor: 'rgba(0,0,0,0)',
                customSize: '75%',
                scaleExtra: 1.1,
                zIndex: 100001
            }).listen('.img-zoomable')
            new Zooming({
                // options...
                bgColor: 'rgba(0,0,0,0)',
                customSize: '75%',
                scaleExtra: 2,
                zIndex: 100001
            }).listen('.img-zoomablexxxtra')
        })
    </script>