[31833] | 1 | $(function() { |
---|
| 2 | |
---|
| 3 | // Fix image height on mobile browsers with misleading CSS vh units |
---|
| 4 | setTimeout( function() { |
---|
| 5 | if( window.innerHeight < $('#theBackImage').height() ) { |
---|
| 6 | $("#theBackImage").css( "height", window.innerHeight + "px" ); |
---|
| 7 | } }, 200); |
---|
| 8 | |
---|
| 9 | // Add gesture events to the image |
---|
| 10 | $("#theBackImage").on( 'tapstart', function( e, touch ) { |
---|
| 11 | // Initial coordinates of the swipe gesture |
---|
| 12 | var initpos = touch.position |
---|
| 13 | // Activate the tapmove event |
---|
| 14 | startBackImgSlide( initpos ); |
---|
| 15 | }); |
---|
| 16 | }); |
---|
| 17 | |
---|
| 18 | function startBackImgSlide( initpos ) { |
---|
| 19 | |
---|
| 20 | // Default to no transition time and the hand cursor |
---|
| 21 | $("#theBackImage").css( "transition-duration", "0s" ); |
---|
| 22 | $("#theBackImage").css( "cursor", "grabbing" ); |
---|
| 23 | |
---|
| 24 | // During the swipe displace the image and after a 38% threshold trigger the image change |
---|
| 25 | // Vertical scrolling is blocked unless the gesture is strongly vertical |
---|
| 26 | $("#theBackImage").on( 'tapmove', function( e, touch ) { |
---|
| 27 | |
---|
| 28 | var pxDispX = touch.position.x - initpos.x; |
---|
| 29 | var pcDispX = pxDispX / $(this).width(); |
---|
| 30 | ( Math.abs( pcDispX ) > 0.38 ) ? backImgSlideOff( pcDispX ) : $(this).css( "transform", "translateX(" + pxDispX + "px)" ); |
---|
| 31 | |
---|
| 32 | var pxDispY = touch.position.y - initpos.y; |
---|
| 33 | if( Math.abs( pxDispY ) < Math.abs( 2*pxDispX ) ) e.preventDefault(); |
---|
| 34 | }); |
---|
| 35 | |
---|
| 36 | // Reset of image displacement if gesture finishes before swipe reaches the threshold |
---|
| 37 | $("#theBackImage").on( 'tapend', function( e, touch ) { |
---|
| 38 | $(this).off( 'tapmove' ); |
---|
| 39 | $(this).css( "transition-duration", "0.5s" ); |
---|
| 40 | $(this).css( "transform", "translateX(0px)" ); |
---|
| 41 | $(this).css( "opacity", "1" ); |
---|
| 42 | $(this).css( "cursor","grab" ); |
---|
| 43 | $(this).off( 'tapend' ); |
---|
| 44 | }); |
---|
| 45 | } |
---|
| 46 | |
---|
| 47 | function backImgSlideOff( pcEndX ) { |
---|
| 48 | // Unbind events and follow the corresponding link |
---|
| 49 | $("#theBackImage").off( 'tapmove' ); |
---|
| 50 | $("#theBackImage").off( 'tapend' ); |
---|
| 51 | $("#theBackImage").css( "cursor", "" ); |
---|
| 52 | // Trigger slide off animation |
---|
| 53 | $("#theBackImage").css( "transition-duration", "0.5s" ); |
---|
| 54 | $("#theBackImage").css( "transform", "translateX(" + (pcEndX*200) + "%)" ); |
---|
| 55 | $("#theBackImage").css( "opacity", "0" ); |
---|
| 56 | // Follow the corresponding link |
---|
| 57 | if( pcEndX > 0 ) { |
---|
| 58 | setTimeout( function() { |
---|
| 59 | $('#linkPrev')[0].click(); |
---|
| 60 | }, 500 ); |
---|
| 61 | } else { |
---|
| 62 | setTimeout( function() { |
---|
| 63 | $('#linkNext')[0].click(); |
---|
| 64 | }, 500 ); |
---|
| 65 | } |
---|
| 66 | } |
---|
| 67 | |
---|