开发者

Disable zooming in for photo swipe

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.


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
}


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;
}


to disable zooming you must set

allowUserZoom = false


In 2023 version the answer is for example:

imageClickAction: 'next' / 'close',
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜