Allow Pinch-To-Zoom in LightBox in Mobile

Wappler General Need Help
1

Hi.
I have implemented a regular lightbox and it works well. The main image is a thumbnail & on click of it, larger image loads in the light box.
This UX works well for desktop. But for mobile, the size of thumbnail and image in lightbox don’t change much. It usually just 1.5/2 times the thumbnail… whereas the actual image could be 4/5 time bigger.

I see that the lightbox has “swipe left/right” gestures to navigate between images, but there is no option to pinch-to-zoom on current image.
I tried changing the page’s meta tag to user-scalable=yes, but when lightbox is open, there is conflict between swipe gesture and pinch gestures.

Is there any way to allow pinch to zoom in lightbox? It could be an alternate between swipe and pinch gestures. I understand both can’t work at the same time since the zoomed image needs to be panned, which would invoke the swipe geture.

2 Likes
2

Hi hi... @sid did you ever find a solution....to your needs... i have a client that now wants to "ZOOM" in and out off.....

What did you come up with your side... i was thinking and wondering the the lightbox can have a ZOOM tool on the size.. + - icons....

or somethign like this?

or this

but it needs to be practical....

It would be great to make + and - tool.. on the lightbox itself.. to zoom in and out.... overkill.. im sure.....

3

@sid something like this would be cool.

4

Never implemented any solution from what I remember.
For mobile device, pinch-to-zoom does work I think.

1 Like
5

if you are looking for an alternative then this is easy to implement... as the current wappler lightbox dont have the "extras" then try this.. its got zoom.. slide show..... and the license is free for projects and commercial use....

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Advanced Lightbox Example with Fancybox</title>
    <!-- Fancybox CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
</head>

<body is="dmx-app" id="picturetest">

    <!-- Gallery -->
    <div class="gallery">
        <a href="1.jpg" data-fancybox="gallery" data-caption="Image Description">
            <img src="1.jpg" alt="Image Description" style="width:200px;">
        </a>
        <!-- Add more images similarly -->
    </div>

    <!-- jQuery and Fancybox JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

    <script>
        $(document).ready(function() {
            $('[data-fancybox="gallery"]').fancybox({
                buttons: [
                    "zoom",
                    "share",
                    "slideShow",
                    "fullScreen",
                    "download",
                    "thumbs",
                    "close"
                ],
                // Enable touch gestures
                touch: {
                    vertical: false, // Allow swipe up/down to close
                    momentum: true
                },
                // Customize the animation effect
                transitionEffect: "zoom-in-out",
                // Add more customization options as needed
            });
        });
    </script>

</body>

</html>
1 Like