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