Javascript Photosweep 4.0：启动&x27；滑动到下一个'；程序化

形势

我一直试图在单击“下一步”按钮时触发“幻灯片到下一张图片”动画，但我没有找到解决方案

关于这一点，目前正在进行讨论，但它只是关于添加幻灯片动画的选项，而不是关于如何像现在这样使用PS进行操作

在3.0中有一个选项，但由于4.0是一个完整的重写，它不再工作

问题

单击箭头时，我需要的不是“跳转”到下一张/上一张图片，而是在滑动/拖动图像时使用的“幻灯片过渡”

---

没有选项可以触发这种效果，那么我如何才能用JS手动触发这种效果呢？

我终于咬紧牙关，花了一些时间来实现这一点，因为似乎没有人能解决这个问题，无论是在GitHub还是其他任何地方

解决方案

我使用了这样一个事实：点击箭头会跳转到下一个项目，触发下一个图像的加载，并设置整个幻灯片状态，以在瞬间表示正确的情况。 因此，我只是添加了自定义按钮，它将启动幻灯片转换，然后触发对原始按钮（我通过CSS隐藏）的单击，这将更新幻灯片状态，以直观地表示我创建的情况

添加了新的下一个和上一个箭头

通过css隐藏原始的下一个和上一个箭头

单击新的“下一个”或“上一个”箭头时，自己为幻灯片设置动画

然后以编程方式触发对原始“下一个”或“上一个”箭头的单击

下面是代码：

HTML

// THE NEW BUTTONS
<button class="NEW-button-left" title="Previous (arrow left)">PREV</button>
<button class="NEW-button-right" title="Next (arrow right)">NEXT</button>

// added right before this original lines of the example code
<button class="pswp__button pswp__button--arrow--left ...

JAVASCRIPT（助手函数）

JAVASCRIPT（主）

我使用了这些SE答案中的信息：

---

我终于咬紧牙关，花了一些时间来完成这项工作，因为似乎没有人能找到解决方案，无论是在GitHub还是其他任何地方

解决方案

我使用了这样一个事实：点击箭头会跳转到下一个项目，触发下一个图像的加载，并设置整个幻灯片状态，以在瞬间表示正确的情况。 因此，我只是添加了自定义按钮，它将启动幻灯片转换，然后触发对原始按钮（我通过CSS隐藏）的单击，这将更新幻灯片状态，以直观地表示我创建的情况

添加了新的下一个和上一个箭头

通过css隐藏原始的下一个和上一个箭头

单击新的“下一个”或“上一个”箭头时，自己为幻灯片设置动画

然后以编程方式触发对原始“下一个”或“上一个”箭头的单击

下面是代码：

HTML

// THE NEW BUTTONS
<button class="NEW-button-left" title="Previous (arrow left)">PREV</button>
<button class="NEW-button-right" title="Next (arrow right)">NEXT</button>

// added right before this original lines of the example code
<button class="pswp__button pswp__button--arrow--left ...

JAVASCRIPT（助手函数）

JAVASCRIPT（主）

我使用了这些SE答案中的信息：

---

您可以使用css转换：

.pswp\uu容器{
过渡：.3s轻松进出全部；
}

---

这可能对移动设备的性能不太理想，但我只是在媒体查询中添加了这种转换，并允许用户在较小的屏幕上使用滑动功能

您可以使用css转换：

.pswp\uu容器{
过渡：.3s轻松进出全部；
}

---

这可能对移动设备的性能不太理想，但我只是在媒体查询中添加了这种转换，并允许用户在较小的屏幕上使用滑动功能

Photosweep幻灯片过渡
所以，我在Photosweep中添加了幻灯片转换，它工作得很好，不会干扰本机行为。

唯一的限制是，在循环模式下，接缝之间不会应用过渡（例如，从最后一张幻灯片循环到幻灯片1时）。在示例中，我使用了jQuery

本质上，它只需按需向

.pswp\uuu容器

添加CSS转换类即可工作，但我们需要添加一些javascript事件以防止转换干扰刷卡，并且只有在使用

鼠标时才可以。我们还添加了一个补丁，这样就不会在环接缝之间添加过渡

1。将以下内容添加到CSS中

它将在需要时从javascript按需应用

.pswp__container_transition {
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

2。添加javascript事件以协助分配转换类
这可以放在任何地方，但必须在jQuery加载后触发

var mouseUsed = false;
$('body').on('mousedown', '.pswp__scroll-wrap', function(event) {
  // On mousedown, temporarily remove the transition class in preparation for swipe.     $(this).children('.pswp__container_transition').removeClass('pswp__container_transition');
}).on('mousedown', '.pswp__button--arrow--left, .pswp__button--arrow--right', function(event) {
  // Exlude navigation arrows from the above event.
  event.stopPropagation();
}).on('mousemove.detect', function(event) {
  // Detect mouseUsed before as early as possible to feed PhotoSwipe
  mouseUsed = true;
  $('body').off('mousemove.detect');
});

3。在更改前添加
侦听器以在Photosweep init上重新分配转换类

需要在Photosweep初始化逻辑中添加以下内容

// Create your photoswipe gallery element as usual
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// Transition Manager function (triggers only on mouseUsed)
function transitionManager() {

  // Create var to store slide index
  var currentSlide = options.index;

  // Listen for photoswipe change event to re-apply transition class
  gallery.listen('beforeChange', function() {

    // Only apply transition class if difference between last and next slide is < 2
    // If difference > 1, it means we are at the loop seam.
    var transition = Math.abs(gallery.getCurrentIndex()-currentSlide) < 2;

    // Apply transition class depending on above
    $('.pswp__container').toggleClass('pswp__container_transition', transition);

    // Update currentSlide
    currentSlide = gallery.getCurrentIndex();
  });
}

// Only apply transition manager functionality if mouse
if(mouseUsed) {
  transitionManager();
} else {
  gallery.listen('mouseUsed', function(){
    mouseUsed = true;
    transitionManager();
  });
}

// init your gallery per usual
gallery.init();

//像往常一样创建Photosweep gallery元素
gallery=新的Photosweep（pswpElement、PhotosweepUI\u默认值、项目、选项）；
//过渡管理器功能（仅在鼠标按下时触发）
函数转换管理器（）{
//创建var以存储幻灯片索引
var currentSlide=options.index；
//侦听Photosweep更改事件以重新应用转换类
gallery.listen（'beforeChange'，function（））{
//仅当上一张幻灯片和下一张幻灯片之间的差异小于2时才应用转换类
//如果差异>1，则表示我们处于循环接缝处。
var transition=Math.abs（gallery.getCurrentIndex（）-currentSlide）<2；
//根据以上内容应用转换类
$（'.pswp\uuu container'）.toggleClass（'pswp\uu container\u transition'，transition）；
//更新当前幻灯片
currentSlide=gallery.getCurrentIndex（）；
});
}
//仅在使用鼠标时应用转换管理器功能
如果（使用鼠标）{
transitionManager（）；
}否则{
gallery.listen（'mouseUsed'，function（）{
mouseUsed=true；
transitionManager（）；
});
}
//照常在你的画廊里
gallery.init（）；
Photosweep幻灯片过渡

所以，我在Photosweep中添加了幻灯片转换，它工作得很好，不会干扰本机行为。


var mouseUsed = false;
$('body').on('mousedown', '.pswp__scroll-wrap', function(event) {
  // On mousedown, temporarily remove the transition class in preparation for swipe.     $(this).children('.pswp__container_transition').removeClass('pswp__container_transition');
}).on('mousedown', '.pswp__button--arrow--left, .pswp__button--arrow--right', function(event) {
  // Exlude navigation arrows from the above event.
  event.stopPropagation();
}).on('mousemove.detect', function(event) {
  // Detect mouseUsed before as early as possible to feed PhotoSwipe
  mouseUsed = true;
  $('body').off('mousemove.detect');
});

// Create your photoswipe gallery element as usual
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

// Transition Manager function (triggers only on mouseUsed)
function transitionManager() {

  // Create var to store slide index
  var currentSlide = options.index;

  // Listen for photoswipe change event to re-apply transition class
  gallery.listen('beforeChange', function() {

    // Only apply transition class if difference between last and next slide is < 2
    // If difference > 1, it means we are at the loop seam.
    var transition = Math.abs(gallery.getCurrentIndex()-currentSlide) < 2;

    // Apply transition class depending on above
    $('.pswp__container').toggleClass('pswp__container_transition', transition);

    // Update currentSlide
    currentSlide = gallery.getCurrentIndex();
  });
}

// Only apply transition manager functionality if mouse
if(mouseUsed) {
  transitionManager();
} else {
  gallery.listen('mouseUsed', function(){
    mouseUsed = true;
    transitionManager();
  });
}

// init your gallery per usual
gallery.init();

    goTo: function(index) {
    var itemsDiff;

    if (index == _currentItemIndex + 1) { //Next
        itemsDiff = 1;
    }
    else { //Prev
        itemsDiff = -1;
    }

    var itemChanged;
    if(!_mainScrollAnimating) {
        _currZoomedItemIndex = _currentItemIndex;
    }

    var nextCircle;

    _currentItemIndex += itemsDiff;

    if(_currentItemIndex < 0) {
        _currentItemIndex = _options.loop ? _getNumItems()-1 : 0;
        nextCircle = true;
    } else if(_currentItemIndex >= _getNumItems()) {
        _currentItemIndex = _options.loop ? 0 : _getNumItems()-1;
        nextCircle = true;
    }

    if(!nextCircle || _options.loop) {
        _indexDiff += itemsDiff;
        _currPositionIndex -= itemsDiff;
        itemChanged = true;
    }

    var animateToX = _slideSize.x * _currPositionIndex;
    var animateToDist = Math.abs( animateToX - _mainScrollPos.x );
    var finishAnimDuration = 333; 

    if(_currZoomedItemIndex === _currentItemIndex) {
        itemChanged = false;
    }

    _mainScrollAnimating = true;

    _shout('mainScrollAnimStart');

    _animateProp('mainScroll', _mainScrollPos.x, animateToX, finishAnimDuration, framework.easing.cubic.out, 
        _moveMainScroll,
        function() {
            _stopAllAnimations();
            _mainScrollAnimating = false;
            _currZoomedItemIndex = -1;

            if(itemChanged || _currZoomedItemIndex !== _currentItemIndex) {
                self.updateCurrItem();
            }

            _shout('mainScrollAnimComplete');
        }
    );

    if(itemChanged) {
        self.updateCurrItem(true);
    }

    return itemChanged;

},