Jquery ui Lightbox2触摸屏的滑动手势

令我大吃一惊的是，Lightbox2（）不支持框外滑动手势

---

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

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

您将需要：

• jquery ui幻灯片效果，您可以在

也许有一个最简单的方法来获取/实现所有这3个小依赖项。。。但这种方式对我很有效

在lightbox脚本中，添加新的LightboxOptions

启用LightboxTouchDevices

，并将其设置为true：

this.enableSwipeOnTouchDevices   = true; 

在

this.$lightbox.find（'.lb next'）之后添加以下块。在（'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');
            }
          }
        }
      }
  }
};

Lightbox.prototype.updateNav=function（）{
//检查浏览器是否支持触摸事件。如果支持，我们将采用保守的方法
//并假定不支持鼠标悬停事件，并且始终显示prev/next导航
//图像集中的箭头。
var alwaysShowNav=错误；
var enableSwipe=false；
试一试{
document.createEvent（“TouchEvent”）；
alwaysShowNav=（this.options.alwaysShowNavOnTouchDevices）？true:false；
enableSwipe=（this.options.enableSwipe设备）？true:false；
}捕获（e）{}
//如果启用滑动，则隐藏两个导航按钮
如果（！启用滑动）{
这个.$lightbox.find（'.lb nav'）.show（）；
如果（this.album.length>1）{
if（this.options.wrapparound）{
如果（始终显示导航）{
这个.$lightbox.find（'.lb prev，.lb next'）.css（'opacity'，'1'）；
}
这个.$lightbox.find（'.lb prev，.lb next'）.show（）；
}否则{
如果（此.currentImageIndex>0）{
这个.$lightbox.find（'.lb prev'）.show（）；
如果（始终显示导航）{
这个.$lightbox.find（'.lb prev'）.css（'opacity'，'1'）；
}
}
if（this.currentImageIndex

我使用jquery mobile检测了

swipeleft

和

swiperight

。然后将它们绑定到单击

.lb next

和

.lb prev

。它现在正在工作

---

这是我的。

PEC的解决方案对我有效，只需在Jekyll网站上进行一次修改

而不是： this.enableSwipaUntouchDevices=true

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

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

lightbox.option({
“EnableTouchDevices”：真，
})

PEC解决方案很好，但在当前版本的lightbox（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;
});

---

出于好奇，您是否考虑过将此作为原始项目的补丁提交？它将帮助很多人解决问题，并将解决此问题