[Lightbox2触摸屏的轻扫手势

Question

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

我无法找到任何添加项来支持此行为。有人对更改整个插件有什么建议吗？ ：）

Answer 1

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

您将需要：

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

也许有一种最简单的方法来获取/实现所有这三个小依赖项...但是这种方法对我有用。

在灯箱脚本中，添加一个新的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。