Allow zoom for a specific group

Quick question… if, in the General Settings you have selected the option “Prevent the user from zooming”, does anyone know of a way to get the zoom functionality enabled again for say just a group only?

So, I’ve been working on a mobile app which for 99% of it I wanted to disable the zoom.
I have an image viewer page (group) and it would be nice to have the ability to zoom again for that group only so you can zoom in on images that are part of the image slider.

I thought maybe HTML element > Attribute ID > Run JavaScript but couldn’t figure it out

1 Like

Hello @pork1977gm , I have got the same question ! Did you find any answer to this ?

Oh I vaguely remember this, I think I ended up using one of the plugins which had the ability to zoom in on the image within the slider only. I forget all the details as to which plug-in it was, I’ll take a look through the app which I think I have it in.

Thank you for answering ! I would be very interested in it :slight_smile:

Ok, I think you can do it like this. I’ve just taken a look at an old app and I think it works like this so give it a try and see if it works. It uses Hammer.js

If it doesn’t work as expected, then let me know and I’ll try and do a demo.
Hammer.JS - Hammer.js

Create a workflow that runs when your group/image or whatever becomes visible and add a run javascript action.


You’ll notice it uses an element ID in that, so add that to your image/group element like so.
I used the slideshow plugin but hopefully it will work with other bubble elements.


Now add this HTML element to your page. Don’t change the code, just copy and paste it.
When your image element becomes visible, the javascript action will run, run the function below and hopefully you’ll be able to pinch zoom into that element.

<script src=""></script>
function hammerIt(elm) {
    hammertime = new Hammer(elm, {});
        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) {}
   = transform;
            transform = "";

        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;

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

        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) {
   = transform;
1 Like

@pork1977gm Thank you a lot I will try this tomorrow !

This worked so perfectly - thank you very much! I am noticing now though, I cannot scroll right on the image if it is not zoomed…do you know why this is?

did you solve this?
I have a similar issue, the zoom works great, but my images are displayed as a vertical list and when scrolling down the page with 1 finger to see more, it will only scroll if your finger is touching an area outside of the image element. ( I need my image to be full width, so this creates a very annoying UX issue haha)

If using the Slick Slider, you can just remove everything out that HTML and put only this:

    .slick-slider {
        touch-action: auto !important

Also remove the attribute ID that was set and the action then just load the page. It will simply allow the touch events again on the element and if you zoom in on the page, Hammer.JS won’t skew the images when you try to scroll. It’s not perfect but it will allow you to zoom and still slide the images (so long as you’re not zoomed in too much).

All you need is the HTML element and nothing else.