如何將滑動手勢集成到陰影盒幻燈片？

我很喜歡Shadowbox及其快捷設置。我想添加滑動功能從一張照片導航到下一張照片。如何將滑動手勢集成到陰影盒幻燈片？

我目前使用的是jswipe，雖然我可以正確觸發滑動手勢並控制＃sb-container外部的幻燈片顯示，但我無法使用滑動手勢在div內的任何位置運行。

是否有人成功集成滑動導航來控制shadowbox.js幻燈片？

下面是該網站我建立一個鏈接...

http://totophoto.mattwooddc.com/portfolio/commercial/

任何建議，將不勝感激。謝謝！

來源

2011-09-20 Matt Wood

我設法讓它工作。

首先，我從jQuery Mobile「借來」一個觸摸事件庫。下面是縮小的代碼：

(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)

我包括jQuery採取他們的選擇器引擎的優勢，以及一些不錯的輔助功能。

然後，我檢查shadowbox是否通常會顯示上一個和下一個按鈕的圖庫。如果是，那麼shadowbox被賦予類.sb-touch，並且兩個事件處理程序在該選擇器上的觸摸事件之後偵聽。

var myApp = { 
    SBAdjust: function() { 
     if (Shadowbox.hasNext()) 
      $('#sb-body').addClass('sb-touch'); 

     $(document).on('swipeleft', '.sb-touch', function (e) { 
      e.preventDefault(); 
      Shadowbox.next(); 
     }); 
     $(document).on('swiperight', '.sb-touch', function (e) { 
      e.preventDefault(); 
      Shadowbox.previous(); 
     }); 
    } 
}

當然，你需要初始化所有這些地方，所以這樣它看起來更像這個編輯Shadowbox.init()屬性：

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

來源

2012-12-07 11:01:14

Jezen托馬斯的解決方案是一個很好的開始！但是，它並不適合我，因爲一次刷卡就會觸發多次刷卡事件。幻燈片將提前推進多個圖像。

我以Jezen的代碼開始，我最終使用jQuery Swipe。你可以看到我的執行in action here。

希望這有助於:)

來源

2013-03-24 22:01:33 Elliot

謝謝Jezen托馬斯:) 它的作品！我知道它沒有'從右向左滑動'的效果，但無論如何它都很有用。順便說一句，我添加了一個小功能，通過點擊/點擊照片右側來改變圖像。它在這裏：

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

太極拳標準控件（箭頭）太小，無法把它用在手機上。所以我希望它能幫助那些想要在任何地方都能找到好工作的人。

來源

2013-03-27 17:01:02 pgasovav

我能夠使用touchswipe得到這個工作。

首先包括touchswipe js文件，你可以在這裏下載：https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

然後包括下面的代碼：

$(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）

來源

2013-07-29 22:00:15 drumnbace

工程。謝謝！ –

如何將滑動手勢集成到陰影盒幻燈片？

回答

相關問題