Question

令我惊讶的是，Lightbox2（http://lokeshdhakar.com/projects/lightbox2/）不支持开箱即用的滑动手势......

我无法找到任何添加内容以支持此行为。任何人都有改变整个插件的建议？：）

Answer 1

总而言之，您必须隐藏导航按钮并在图像上实现滑动，移动和滑动效果。

您将需要：

jquery.event.move
jquery.event.swipe
jquery ui幻灯片效果，您可以将其打包在jquery ui download builder

也许有一种最简单的方法可以获得/实现所有这3个小依赖...但这种方式对我有用。

<>在灯箱脚本中，添加一个新的LightboxOptions enableSwipeOnTouchDevices并将其设置为true：

this.enableSwipeOnTouchDevices   = true;

在this.$lightbox.find('.lb-next').on('click'...块之后添加以下块以创建滑动事件：

this.$lightbox.find('.lb-image').on("swiperight",function() {
    $('.lb-image').effect("slide", { "direction" : "right",  "mode" : "hide"} ,function(){
        if (self.currentImageIndex === 0) {
          self.changeImage(self.album.length - 1);
        } else {
          self.changeImage(self.currentImageIndex - 1);
        }
    })
});


this.$lightbox.find('.lb-image').on("swipeleft",function() {  
    $('.lb-image').effect("slide", { "direction" : "left",  "mode" : "hide"} ,function(){
        if (self.currentImageIndex === self.album.length - 1) {
          self.changeImage(0);
        } else {
          self.changeImage(self.currentImageIndex + 1);
        }
    })
});

并重写updateNav函数，以隐藏导航按钮：

Lightbox.prototype.updateNav = function() {
  // Check to see if the browser supports touch events. If so, we take the conservative approach
  // and assume that mouse hover events are not supported and always show prev/next navigation
  // arrows in image sets.
  var alwaysShowNav = false;
  var enableSwipe = false;
  try {
    document.createEvent("TouchEvent");
    alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
    enableSwipe =  (this.options.enableSwipeOnTouchDevices)? true: false;
  } catch (e) {}


    //if swiping is enable, hide the two navigation buttons
    if (! enableSwipe) {
      this.$lightbox.find('.lb-nav').show();

      if (this.album.length > 1) {
        if (this.options.wrapAround) {
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
          }
          this.$lightbox.find('.lb-prev, .lb-next').show();
        } else {
          if (this.currentImageIndex > 0) {
            this.$lightbox.find('.lb-prev').show();
            if (alwaysShowNav) {
              this.$lightbox.find('.lb-prev').css('opacity', '1');
            }
          }
          if (this.currentImageIndex < this.album.length - 1) {
            this.$lightbox.find('.lb-next').show();
            if (alwaysShowNav) {
              this.$lightbox.find('.lb-next').css('opacity', '1');
            }
          }
        }
      }
  }
};

Answer 2

我已经使用jquery mobile来检测swipeleft和swiperight。然后将它们绑定以单击.lb-next和.lb-prev。现在正在工作。

这是我的codepen。

Answer 3

PEC的解决方案在Jekyll站点上进行了一次修改，为我工作。

代替： this.enableSwipeOnTouchDevices = true;

我们在依赖项和lightbox.js之后将其添加到/_includes/scripts.html中：

<script>
lightbox.option({
  'enableSwipeOnTouchDevices': true,
})
</script>

Answer 4

PEC解决方案很好，但是在当前版本的灯箱（2.11.2）中不再起作用。 effect（）方法已不存在。

因此应更新刷卡方法：

this.$lightbox.find('.lb-image').on("swiperight",function() {
     if (self.currentImageIndex === 0) {
    self.changeImage(self.album.length - 1);
  } else {
    self.changeImage(self.currentImageIndex - 1);
  }
  return false;
});

this.$lightbox.find('.lb-image').on("swipeleft",function() {  
  if (self.currentImageIndex === self.album.length - 1) {
    self.changeImage(0);
  } else {
    self.changeImage(self.currentImageIndex + 1);
  }
  return false;
});

Lightbox2用于触摸屏的轻扫手势

4 个答案: