Forum Documentation Showcase Pricing Learn more

Hammer.js and ID Attribute (pinch zoom)

#1

Hi,

Bit of a “not-so-bubble” type of question this is, but I was just wondering, has anyone used Hammer.js and have it working with Pinch zoom on any type of element in Bubble if it’s given an ID attribute?

Does that make sense?

So, if I had an image for example, or even used the slideshow, gave it an ID attribute, would it be possible to something like this…

https://codepen.io/josephmaynard/pen/OjWvNP

(Good for mobile when zooming)
I’ve been trying since day dot to get a nice pinch zoom working on a specific element ID and not have the whole screen zoom in and out. Ended up revisiting it again today, not managed to get any further though!

0 Likes

#2

I don’t know a lot about hammer.js, but I think it still should work. Try applying the script to the .parentElement of the image or whatever you’re trying.

It seems Bubble always places a div element, and I’ve had to target that instead for some things.

0 Likes

#3

Thanks for the reply Tim, I’ll try that and have a play with it.

1 Like

#4

I actually managed to get pinch zoom working with Bubble’s own slideshow on mobile devices! Feels great!

Anyone else wanting this functionality, do it like this…

Give the Slideshow an ID Attribute:
image

Create a small HTML element with the following code inside it

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script>
function hammerIt(elm) {
    hammertime = new Hammer(elm, {});
    hammertime.get('pinch').set({
        enable: true
    });
    var posX = 0,
        posY = 0,
        scale = 1,
        last_scale = 1,
        last_posX = 0,
        last_posY = 0,
        max_pos_x = 0,
        max_pos_y = 0,
        transform = "",
        el = elm;

    hammertime.on('doubletap pan pinch panend pinchend', function(ev) {
        if (ev.type == "doubletap") {
            transform =
                "translate3d(0, 0, 0) " +
                "scale3d(2, 2, 1) ";
            scale = 2;
            last_scale = 2;
            try {
                if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
                    transform =
                        "translate3d(0, 0, 0) " +
                        "scale3d(1, 1, 1) ";
                    scale = 1;
                    last_scale = 1;
                }
            } catch (err) {}
            el.style.webkitTransform = transform;
            transform = "";
        }

        //pan    
        if (scale != 1) {
            posX = last_posX + ev.deltaX;
            posY = last_posY + ev.deltaY;
            max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
            if (posX > max_pos_x) {
                posX = max_pos_x;
            }
            if (posX < -max_pos_x) {
                posX = -max_pos_x;
            }
            if (posY > max_pos_y) {
                posY = max_pos_y;
            }
            if (posY < -max_pos_y) {
                posY = -max_pos_y;
            }
        }


        //pinch
        if (ev.type == "pinch") {
            scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
        }
        if(ev.type == "pinchend"){last_scale = scale;}

        //panend
        if(ev.type == "panend"){
            last_posX = posX < max_pos_x ? posX : max_pos_x;
            last_posY = posY < max_pos_y ? posY : max_pos_y;
        }

        if (scale != 1) {
            transform =
                "translate3d(" + posX + "px," + posY + "px, 0) " +
                "scale3d(" + scale + ", " + scale + ", 1)";
        }

        if (transform) {
            el.style.webkitTransform = transform;
        }
    });
}
</script>
</head>
</html>

Now create a workflow action that runs JavaScript when the slideshow is visible

hammerIt(document.getElementById("slideshow_a"));

4 Likes

#5

Thanks for passing along this tip.

0 Likes

#6

No probs!

0 Likes