Lightbox2掃動手勢用於觸摸屏的

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'); 
      } 
      } 
     } 
     } 
    } 
};