Question

在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。

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

在PhotoSwipe上禁用缩小

1 个答案: