Disable zooming in for photo swipe

Question

I'm using Photo Swipe to display my images. The default behavior when using it is that once the images are clicked, I'll be able to bring me to a "zoom-in page" where the photos are enlarged and i can view them one by one by swiping.

I'm trying to overwrite this behavior because I want to do something else after the user clicks on the image.

Answer 1

All solutions described here did not work for me. Here is a complete solution that turns off zooming.

Settings:

var options = {
    // Gallery options
    maxSpreadZoom: 1,
    getDoubleTapZoom: function (isMouseClick, item) {
        return item.initialZoomLevel;
    },
    // UI options
    zoomEl: false
};

Gallery init:

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
// ...

And finally add this CSS snippet to disable zoom cursor:

.pswp--zoom-allowed .pswp__img {
    cursor: default !important
}

Answer 2

The option allowUserZoom doesn't exist in the documentation You can disable the double tap zoom by returning item.initialZoomLevel and reduce the spread (zoom) gesture by setting maxSpreadZoom to the same initialZoom :

gallery.init();

gallery.options.maxSpreadZoom = gallery.getZoomLevel();
gallery.options.getDoubleTapZoom = function(isMouseClick, item) {
    return item.initialZoomLevel;
}

Answer 3

to disable zooming you must set

allowUserZoom = false

Answer 4

In 2023 version the answer is for example:

imageClickAction: 'next' / 'close',

Answer 5

Updated: PhotoSwipe 5

To adjust opening or closing transition type use lightbox option showHideAnimationType (String).

It supports three values:

1. zoom (default)
2. fade (default if there is no thumbnail)
3. none

Animations are automatically disabled if user (prefers-reduced-motion: reduce).

Answer 6

This pure css solutions seems to work for me:

.pswp__img {
    pointer-events: none;
}

.pswp__button--zoom {
    display: none !important;
}