Question

状况

单击“下一步”按钮时，我一直试图触发“滑动到下一张图片”动画，但我还没有找到解决方法。

在GitHub上正在讨论这个问题，但它只是关于添加幻灯片动画的选项，而不是如何实际使用PS来实现它。现在就是这样。

在3.0中有一个选项，但4.0是完全重写它不再起作用。

问题

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

没有选项可以触发，所以如何用JS手动触发此效果？

Answer 1

PhotoSwipe幻灯片切换
因此，我将幻灯片转换添加到了Photoswipe，并且它可以很好地工作而不会干扰本机行为。 http://codepen.io/mjau-mjau/full/XbqBbp/ http://codepen.io/mjau-mjau/pen/XbqBbp

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

基本上，它可以通过简单地根据需要向.pswp__container添加CSS过渡类来实现，但我们需要添加一些javascript事件以防止过渡干扰Swipe，并且仅在mouseUsed时。我们还添加了一个补丁，因此不会在循环接缝之间添加转换。

<强> 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。添加beforeChange侦听器以在photoswipe init上重新分配过渡类
以下内容需要在PhotoSwipe init逻辑中添加。

// 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();

Answer 2

您可以使用css转换：

.pswp__container{ transition:.3s ease-in-out all; }

这可能不适合移动设备上的性能，但我只是在媒体查询中添加此转换，并允许用户在较小的屏幕上使用滑动功能。

Answer 3

我终于咬紧牙关并花了一些时间来完成这项工作，因为似乎没有人能够解决这个问题，而不是在GitHub上或其他任何地方。

<强>解

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

添加了新的下一个和上一个箭头
通过css
点击新的下一个或上一个箭头时，我自己动画幻灯片
然后以编程方式触发点击ORIGINAL next或prev箭头

所以这是代码：

<强> 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 ...

<强> CSS

pswp__button--arrow--left,
pswp__button--arrow--right {
  display: none;
}
NEW-button-left,
NEW-button-right {
  /* whatever you fancy */
}

JAVASCRIPT （辅助函数）

var tx = 0; // current translation
var tdir = 0;
var slidepseactive = false;

// helper function to get current translate3d positions 
// as per https://stackoverflow.com/a/7982594/826194
function getTransform(el) {
  var results = $(el).css('-webkit-transform').match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)
  if(!results) return [0, 0, 0];
  if(results[1] == '3d') return results.slice(2,5);
  results.push(0);
  return results.slice(5, 8);
}

// set the translate x position of an element
function translate3dX($e, x) {
  $e.css({
    // TODO: depending on the browser we need one of those, for now just chrome
    //'-webkit-transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
    //, '-moz-transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
    'transform': 'translate3d(' +String(x) + 'px, 0px, 0px)'
  });
};

JAVASCRIPT （主要）

// will slide to the left or to the right
function slidePS(direction) {
  if (slidepseactive) // prevent interruptions
    return;

  tdir = -1;
  if (direction == "left") {
    tdir = 1;
  }

  // get the current slides transition position
  var t = getTransform(".pswp__container");
  tx = parseInt(t[0]);

  // reset anim counter (you can use any property as anim counter)
  $(".pswp__container").css("text-indent", "0px");

  slidepseactive = true;
  $(".pswp__container").animate(
    {textIndent: 100},{
      step: function (now, fx) {
        // here 8.7 is the no. of pixels we move per animation step %
        // so in this case we slide a total of 870px, depends on your setup
        // you might want to use a percentage value, in this case it was
        // a popup thats why it is a a fixed value per step
        translate3dX($(this), tx + Math.round(8.7 * now * tdir));
      },
      duration: '300ms',
      done: function () {
        // now that we finished sliding trigger the original buttons so 
        // that the photoswipe state reflects the new situation
        slidepseactive = false;
        if (tdir == -1)
          $(".pswp__button--arrow--right").trigger("click");
        else
          $(".pswp__button--arrow--left").trigger("click");
      }
    },
    'linear');
}

// now activate our buttons
$(function(){

  $(".NEW-button-left").click(function(){
    slidePS("left");
  });

  $(".NEW-button-right").click(function(){
    slidePS("right");
 });

});

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

Answer 4

使用滑动手势时，PhotoSwipe可以自行完成此操作。那么为什么不使用内部代码而不是那些效果不好的东西呢？

使用我的解决方案一切正常，箭头点击，光标键，甚至循环回到最后，它不会破坏任何东西。

只需编辑photoswipe.js文件并使用以下代码替换goTo函数：

    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;

},

Photoswipe 4.0：启动＆＃39;滑动到下一个n＃39;编程

4 个答案: