在 PhotoSwipe 上禁用缩小答案

【问题标题】：Disable zoom out on PhotoSwipe在 PhotoSwipe 上禁用缩小
【发布时间】：2019-05-30 09:26:13
【问题描述】：

有没有什么办法可以禁用点击 PhotoSwipe JS 库中的照片时的缩小功能？

当点击特定照片时，我的代码使用applyZoomPan 方法直接转到照片的放大版本（原始大小）。

var openPhotoSwipe = function(index) {
  var pswpElement = document.querySelectorAll('.pswp')[0];
  var options = {
    history: false,
    focus: false,
    showAnimationDuration: 0,
    hideAnimationDuration: 0,
    zoomEl: false,
    maxSpreadZoom: 1,
    getDoubleTapZoom: function(isMouseClick, item) {
      return 1;
    },
    pinchToClose: false
  };

  var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
  gallery.goTo(index);
  gallery.applyZoomPan(1, 0, 0);
};

我希望用户无法点击放大的照片。用户退出放大照片的唯一方法是点击 X。

【问题讨论】：

标签： javascript zooming photoswipe

【解决方案1】：

这个解决方案需要编辑photoswipe-ui-default.js，但并不难做到。您需要创建一个 fork 或在本地托管文件。

在photoswipe-ui-default.js中，添加一行，注释掉一些行：

    ui.onGlobalTap = function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;

        if(_blockControlsTap) {
            return;
        }

        if(e.detail && e.detail.pointerType === 'mouse') {

            // close gallery if clicked outside of the image
            if(_hasCloseClass(target)) {
                pswp.close();
                return;
            }

            if(framework.hasClass(target, 'pswp__img')) {
                // !!!ADD THE FOLLOWING LINE
                pswp.close();
                // !!!COMMENT THESE LINES OUT
                //if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
                //  if(_options.clickToCloseNonZoomable) {
                //      pswp.close();
                //  }
                //} else {
                //  pswp.toggleDesktopZoom(e.detail.releasePoint);
                //}
            }

为了更好的衡量，在同一个文件中，您可以注释掉双击缩放功能：

        // toggle zoom on double-tap
        //_listen('doubleTap', function(point) {
        //  var initialZoomLevel = pswp.currItem.initialZoomLevel;
        //  if(pswp.getZoomLevel() !== initialZoomLevel) {
        //      pswp.zoomTo(initialZoomLevel, point, 333);
        //  } else {
        //      pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
        //  }
        //});

然后在你的 CSS 中添加：

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

【讨论】：