Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grab Strength/Distance #333

Open
DisabledAurora opened this issue Jul 25, 2022 · 0 comments
Open

Grab Strength/Distance #333

DisabledAurora opened this issue Jul 25, 2022 · 0 comments
Labels

Comments

@DisabledAurora
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant