当到达画廊结束/开始时，JavaScript 画廊关闭(而不是循环)

Question

请看标题。我想实现以下目标:

1. 在移动设备上:在 PhotoSwipe 中，当检测到滑动以查看下一张图片时(当已经查看上一张图片时)，关闭照片滑动。

2. 在移动设备上:与上面相同，但在查看第一张图片时。当检测到已查看第一张图像并滑动以显示上一张图像时，关闭 PhotoSwipe。

3. 在桌面上:使用下面的代码，当查看第一个图像时，左箭头 PhotoSwipe UI 按钮被隐藏(因为没有上一个图像可以show) 并且键盘的左箭头键被禁用。
这里的目标是当查看第一张图片并按下键盘上的左箭头键时，PhotoSwipe 画廊不会什么都不做(或循环到最后一张图片)自行关闭。

这是一个显示代码当前状态的 jsfiddle:
https://jsfiddle.net/bezq08oc/

也许一种方法是重新启用循环并在其位置注入(inject)代码以关闭画廊而不是循环它？

loop: false

我正在使用下面的代码:

• 在查看第一张图片或最后一张图片时隐藏不需要的箭头。
• 在查看第一张图片或最后一张图片时，禁用键盘上的左右箭头键。

This will hide the left arrow on first image and right arrow on last image.
It will also work when the keyboard left and right keys are used to change the images.

// Initialize PhotoSwipe
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
    gallery.init();


// disable html-arrows control (Hide left arrow on first image and right arrow on last image)
// Code below works only when PhotoSwipe Gallery loads     
    gallery.getCurrentIndex() === 0 ? $('.pswp__button--arrow--left').hide() : $('.pswp__button--arrow--left').show();
    gallery.getCurrentIndex()+1 === gallery.items.length ? $('.pswp__button--arrow--right').hide() : $('.pswp__button--arrow--right').show();

// disable html-arrows control (Hide left arrow on first image and right arrow on last image)
// Code below works when PhotoSwipe Gallery is already opened
    gallery.listen('beforeChange', function() {
        gallery.getCurrentIndex() === 0 ? $('.pswp__button--arrow--left').hide() : $('.pswp__button--arrow--left').show();
        gallery.getCurrentIndex()+1 === gallery.items.length ? $('.pswp__button--arrow--right').hide() : $('.pswp__button--arrow--right').show();
      }
    );

// disable keys left+right control
    $('body').keydown(function(e) {
        // key left
        if ((e.keyCode || e.which) == 37) {
            if (gallery.getCurrentIndex() === 0) {
                gallery.options.arrowKeys = false;
            } else {
                gallery.options.arrowKeys = true;
            }
        }
        // key right
        if ((e.keyCode || e.which) == 39) {
            if (gallery.getCurrentIndex()+1 === gallery.items.length) {
                gallery.options.arrowKeys = false;
            } else {
                gallery.options.arrowKeys = true;
            }
        }
    });

Answer 1

好的，您可以做到，但您将不得不编辑核心 photoswipe.js 文件。删除您之前尝试执行此操作的代码，例如让按键不执行任何操作并保持循环选项处于打开状态以使其正常工作。

第一部分:在该文件的第 1076 行找到这段代码:

    next: function() {
        self.goTo( _currentItemIndex + 1);
    },
    prev: function() {
        self.goTo( _currentItemIndex - 1);
    },

这是确定用户通过单击或按键将幻灯片切换到上一张或下一张时的操作。因此，我们可以在此处插入一个简单的语句，检查它是第一张幻灯片并向左移动，还是最后一张幻灯片并向右移动。然后启动关闭功能。

因此，将前面提到的代码更改为:

    next: function() {
        if ( (_currentItemIndex + 1) === _getNumItems() ) {
            self.close();
        } else {
            self.goTo( _currentItemIndex + 1);
        }
    },
    prev: function() {
        if ( (_currentItemIndex + 1) === 1) {
            self.close();
        } else {
            self.goTo( _currentItemIndex - 1);
        }
    },

第二部分:我们还需要更改滑动手势的机制，因此在第 2306 行找到这段代码:

        if(gestureType === 'swipe') {
            var totalShiftDist = _currPoint.x - _startPoint.x,
                isFastLastFlick = _releaseAnimData.lastFlickDist.x < 10;

            // if container is shifted for more than MIN_SWIPE_DISTANCE, 
            // and last flick gesture was in right direction
            if(totalShiftDist > MIN_SWIPE_DISTANCE && 
                (isFastLastFlick || _releaseAnimData.lastFlickOffset.x > 20) ) {
                // go to prev item
                itemsDiff = -1;
            } else if(totalShiftDist < -MIN_SWIPE_DISTANCE && 
                (isFastLastFlick || _releaseAnimData.lastFlickOffset.x < -20) ) {
                // go to next item
                itemsDiff = 1;
            }
        }

并且，我们将执行与第一部分中的此功能类似的操作。将代码更改为以下内容:

        if(gestureType === 'swipe') {
            var totalShiftDist = _currPoint.x - _startPoint.x,
                isFastLastFlick = _releaseAnimData.lastFlickDist.x < 10;

            // if container is shifted for more than MIN_SWIPE_DISTANCE,
            // and last flick gesture was in right direction
            if(totalShiftDist > MIN_SWIPE_DISTANCE &&
                (isFastLastFlick || _releaseAnimData.lastFlickOffset.x > 20) ) {
                // go to prev item
                if ( (_currentItemIndex + 1) === 1) {
                    self.close();
                } else {
                    itemsDiff = -1;
                }
            } else if(totalShiftDist < -MIN_SWIPE_DISTANCE &&
                (isFastLastFlick || _releaseAnimData.lastFlickOffset.x < -20) ) {
                // go to next item
                if ( (_currentItemIndex + 1) === _getNumItems() ) {
                    self.close();
                } else {
                    itemsDiff = 1;
                }
            }
        }

我已经在我的网站上进行了测试，它工作正常。

享受 :)