Jquery 如何将滑动手势集成到阴影盒幻灯片中？

我喜欢暗影盒和它的快速和简单的设置。我想添加滑动功能，从一张照片导航到下一张照片

我目前正在使用，虽然我可以让滑动手势正确触发并控制#sb容器外的幻灯片，但我无法让滑动手势在div内的任何地方起作用

是否有人成功集成了滑动导航以控制shadowbox.js幻灯片放映

这里是一个链接到网站，我正在建设

---

如有任何建议，将不胜感激。谢谢大家!

我设法让它工作起来了

首先，我“借用”了一个触摸事件库。以下是缩小的代码：

(function(e,t){e.each("touchstart touchmove touchend orientationchange tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)};e.attrFn[n]=true});var n="ontouchstart"in window,r="touchmove scroll",i=n?"touchstart":"mousedown",s=n?"touchend":"mouseup",o=n?"touchmove":"mousemove";e.event.special.scrollstart={enabled:true,setup:function(){function o(n,r){i=r;var s=n.type;n.type=i?"scrollstart":"scrollstop";e.event.handle.call(t,n);n.type=s}var t=this,n=e(t),i,s;n.bind(r,function(t){if(!e.event.special.scrollstart.enabled){return}if(!i){o(t,true)}clearTimeout(s);s=setTimeout(function(){o(t,false)},50)})}};e.event.special.tap={setup:function(){var t=this,n=e(t);n.bind(i,function(r){function p(e){if(e.type=="scroll"){i=true;return}var t=e.type=="touchmove"?e.originalEvent.touches[0]:e;if(Math.abs(l[0]-t.pageX)>10||Math.abs(l[1]-t.pageY)>10){i=true}}if(r.which&&r.which!==1||n.data("prevEvent")&&n.data("prevEvent")!==r.type){return false}n.data("prevEvent",r.type);setTimeout(function(){n.removeData("prevEvent")},800);var i=false,u=true,a=r.target,f=r.originalEvent,l=r.type=="touchstart"?[f.touches[0].pageX,f.touches[0].pageY]:[r.pageX,r.pageY],c,h;h=setTimeout(function(){if(u&&!i){c=r.type;r.type="taphold";e.event.handle.call(t,r);r.type=c}},750);e(window).one("scroll",p);n.bind(o,p).one(s,function(r){n.unbind(o,p);e(window).unbind("scroll",p);clearTimeout(h);u=false;if(!i&&a==r.target){c=r.type;r.type="tap";e.event.handle.call(t,r);r.type=c}})})}};e.event.special.swipe={setup:function(){var n=this,r=e(n);r.bind(i,function(n){function f(e){if(!u){return}var t=e.originalEvent.touches?e.originalEvent.touches[0]:e;a={time:(new Date).getTime(),coords:[t.pageX,t.pageY]};if(Math.abs(u.coords[0]-a.coords[0])>10){e.preventDefault()}}var i=n.originalEvent.touches?n.originalEvent.touches[0]:n,u={time:(new Date).getTime(),coords:[i.pageX,i.pageY],origin:e(n.target)},a;r.bind(o,f).one(s,function(e){r.unbind(o,f);if(u&&a){if(a.time-u.time<1e3&&Math.abs(u.coords[0]-a.coords[0])>30&&Math.abs(u.coords[1]-a.coords[1])<75){u.origin.trigger("swipe").trigger(u.coords[0]>a.coords[0]?"swipeleft":"swiperight")}}u=a=t})})}};(function(e){function s(){var e=r();if(e!==i){i=e;t.trigger("orientationchange")}}var t=e(window),n,r,i;e.event.special.orientationchange=n={setup:function(){if(e.support.orientation){return false}i=r();t.bind("resize",s)},teardown:function(){if(e.support.orientation){return false}t.unbind("resize",s)},add:function(e){var t=e.handler;e.handler=function(e){e.orientation=r();return t.apply(this,arguments)}}};n.orientation=r=function(){var e=document.documentElement;return e&&e.clientWidth/e.clientHeight<1.1?"portrait":"landscape"}})(jQuery);e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe",swiperight:"swipe"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)}}})})(jQuery)

当然，您需要在某个地方初始化所有这些内容，因此请编辑

Shadowbox.init（）

属性，使其看起来更像这样：

Shadowbox.init({
    onOpen: myApp.SBAdjust,
    onClose: function() {
        $('.sb-touch').removeClass('sb-touch');
    }
});

---

我设法做到了

首先，我“借用”了一个触摸事件库。以下是缩小的代码：

(function(e,t){e.each("touchstart touchmove touchend orientationchange tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)};e.attrFn[n]=true});var n="ontouchstart"in window,r="touchmove scroll",i=n?"touchstart":"mousedown",s=n?"touchend":"mouseup",o=n?"touchmove":"mousemove";e.event.special.scrollstart={enabled:true,setup:function(){function o(n,r){i=r;var s=n.type;n.type=i?"scrollstart":"scrollstop";e.event.handle.call(t,n);n.type=s}var t=this,n=e(t),i,s;n.bind(r,function(t){if(!e.event.special.scrollstart.enabled){return}if(!i){o(t,true)}clearTimeout(s);s=setTimeout(function(){o(t,false)},50)})}};e.event.special.tap={setup:function(){var t=this,n=e(t);n.bind(i,function(r){function p(e){if(e.type=="scroll"){i=true;return}var t=e.type=="touchmove"?e.originalEvent.touches[0]:e;if(Math.abs(l[0]-t.pageX)>10||Math.abs(l[1]-t.pageY)>10){i=true}}if(r.which&&r.which!==1||n.data("prevEvent")&&n.data("prevEvent")!==r.type){return false}n.data("prevEvent",r.type);setTimeout(function(){n.removeData("prevEvent")},800);var i=false,u=true,a=r.target,f=r.originalEvent,l=r.type=="touchstart"?[f.touches[0].pageX,f.touches[0].pageY]:[r.pageX,r.pageY],c,h;h=setTimeout(function(){if(u&&!i){c=r.type;r.type="taphold";e.event.handle.call(t,r);r.type=c}},750);e(window).one("scroll",p);n.bind(o,p).one(s,function(r){n.unbind(o,p);e(window).unbind("scroll",p);clearTimeout(h);u=false;if(!i&&a==r.target){c=r.type;r.type="tap";e.event.handle.call(t,r);r.type=c}})})}};e.event.special.swipe={setup:function(){var n=this,r=e(n);r.bind(i,function(n){function f(e){if(!u){return}var t=e.originalEvent.touches?e.originalEvent.touches[0]:e;a={time:(new Date).getTime(),coords:[t.pageX,t.pageY]};if(Math.abs(u.coords[0]-a.coords[0])>10){e.preventDefault()}}var i=n.originalEvent.touches?n.originalEvent.touches[0]:n,u={time:(new Date).getTime(),coords:[i.pageX,i.pageY],origin:e(n.target)},a;r.bind(o,f).one(s,function(e){r.unbind(o,f);if(u&&a){if(a.time-u.time<1e3&&Math.abs(u.coords[0]-a.coords[0])>30&&Math.abs(u.coords[1]-a.coords[1])<75){u.origin.trigger("swipe").trigger(u.coords[0]>a.coords[0]?"swipeleft":"swiperight")}}u=a=t})})}};(function(e){function s(){var e=r();if(e!==i){i=e;t.trigger("orientationchange")}}var t=e(window),n,r,i;e.event.special.orientationchange=n={setup:function(){if(e.support.orientation){return false}i=r();t.bind("resize",s)},teardown:function(){if(e.support.orientation){return false}t.unbind("resize",s)},add:function(e){var t=e.handler;e.handler=function(e){e.orientation=r();return t.apply(this,arguments)}}};n.orientation=r=function(){var e=document.documentElement;return e&&e.clientWidth/e.clientHeight<1.1?"portrait":"landscape"}})(jQuery);e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe",swiperight:"swipe"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)}}})})(jQuery)

当然，您需要在某个地方初始化所有这些内容，因此请编辑

Shadowbox.init（）

属性，使其看起来更像这样：

Shadowbox.init({
    onOpen: myApp.SBAdjust,
    onClose: function() {
        $('.sb-touch').removeClass('sb-touch');
    }
});

---

杰森·托马斯的解决方案是一个伟大的开端！然而，这对我来说并不太有效，因为一次刷卡会触发多个刷卡事件。幻灯片将提前显示多个图像

我从Jezen的代码开始，最后使用了。您可以看到我的实现

---

希望这有帮助：）

杰森·托马斯的解决方案是一个伟大的开始！然而，这对我来说并不太有效，因为一次刷卡会触发多个刷卡事件。幻灯片将提前显示多个图像

我从Jezen的代码开始，最后使用了。您可以看到我的实现

希望这有帮助：）

谢谢杰森·托马斯：） 它的作品！我知道它没有“从右向左滑动”的效果，但无论如何它是有用的。 顺便说一句，我添加了一个小功能，可以通过单击/点击照片上的右键来更改图像。 在这里：

jQuery(function(){
    jQuery(document).on('click', '#sb-body', function(){
        Shadowbox.next();
    });
});

Shadowbox标准控件（箭头）太小，无法在手机上使用。因此，我希望它能帮助那些不想到处去的人——好的工作阴影盒。

谢谢杰森·托马斯：） 它的作品！我知道它没有“从右向左滑动”的效果，但无论如何它是有用的。 顺便说一句，我添加了一个小功能，可以通过单击/点击照片上的右键来更改图像。 在这里：

jQuery(function(){
    jQuery(document).on('click', '#sb-body', function(){
        Shadowbox.next();
    });
});

---

Shadowbox标准控件（箭头）太小，无法在手机上使用。因此，我希望它能帮助那些不想到处都能看到漂亮的工作阴影盒的人。

我能用TouchWipe让它工作

首先包括您可以在此处下载的TouchWipe js文件：

然后包括以下代码：

$(document).ready(function(){

  $("#sb-body").swipe( {
      //Generic swipe handler for all directions
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
         Shadowbox.next();
      },
      swipeRight:function(event, direction, distance, duration, fingerCount) {
         Shadowbox.previous();
      },
      //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
});  

---

我能够用jquery-1.3.2实现这一点（我知道它较旧，但我被锁定在客户端使用的模板的b/c版本中）

我能够用TouchWipe实现这一点

首先包括您可以在此处下载的TouchWipe js文件：

然后包括以下代码：

$(document).ready(function(){

  $("#sb-body").swipe( {
      //Generic swipe handler for all directions
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
         Shadowbox.next();
      },
      swipeRight:function(event, direction, distance, duration, fingerCount) {
         Shadowbox.previous();
      },
      //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
});  

我能够用jquery-1.3.2实现这一点（我知道它较旧，但我被锁定在客户端使用的模板的b/c版本中）