前提・実現したいこと
fancybox3を使って画像をグループ化し、ポップアップした画像を右開きするようにカスタマイズしています。
(漫画や国語の本と同じ開き方。左をクリックする、←を押す、左から右にスワイプすると次の画像やページに移動)
画面表示、クリック、キーボード、スワイプ全ての動作で右開きにしていますが、スワイプ動作の時のみ、左から右にスワイプすると次の画像に遷移しますが、アニメーションが右から左のままです。(左から右へスワイプしたとき、すこし画像は右に動きますが、指を放したら一瞬で反対の左側に流れていき、次の画像に切り替わる)
画面遷移のアニメーション自体も、スワイプ動作と同様に左から右に画像が流れていくようにするにはjquery.fancybox.jsの3976行目から始まる以下の部分を修正すれば良いと思うのですが、どのようにすれば良いでしょうか
Guestures.prototype.endSwiping = function( swiping, scrolling ) { var self = this, ret = false, len = self.instance.group.length; self.sliderLastPos = null; // Close if swiped vertically / navigate if horizontally if ( swiping == 'y' && !scrolling && Math.abs( self.distanceY ) > 50 ) { // Continue vertical movement $.fancybox.animate( self.instance.current.$slide, { top : self.sliderStartPos.top + self.distanceY + ( self.velocityY * 150 ), opacity : 0 }, 150 ); ret = self.instance.close( true, 300 ); } else if ( swiping == 'x' && self.distanceX > 50 && len > 1 ) { ret = self.instance.next( self.speedX ); } else if ( swiping == 'x' && self.distanceX < -50 && len > 1 ) { ret = self.instance.previous( self.speedX ); } if ( ret === false && ( swiping == 'x' || swiping == 'y' ) ) { if ( scrolling || len < 2 ) { self.instance.centerSlide( self.instance.current, 150 ); } else { self.instance.jumpTo( self.instance.current.index ); } } self.$container.removeClass( 'fancybox-is-sliding' ); };
あなたの回答
tips
プレビュー