https://www.bestmart360.com/catalog/view/javascript/js/assets/touchTouch/touchTouch.jquery.js

1/**
2 * @name		jQuery touchTouch plugin
3 * @author		Martin Angelov
4 * @version 	1.0
5 * @url			http://tutorialzine.com/2012/04/mobile-touch-gallery/
6 * @license		MIT License
7 */
8
9(function(){
10	
11	/* Private variables */
12	
13	var overlay = $('<div id="galleryOverlay">'),
14		slider = $('<div id="gallerySlider">'),
15		prevArrow = $('<a id="prevArrow"></a>'),
16		nextArrow = $('<a id="nextArrow"></a>'),
17		overlayVisible = false;
18		
19		
20	/* Creating the plugin */
21	
22	$.fn.touchTouch = function(){
23		
24		var placeholders = $([]),
25			index = 0,
26			items = this;
27		
28		// Appending the markup to the page
29		overlay.hide().appendTo('body');
30		slider.appendTo(overlay);
31		
32		// Creating a placeholder for each image
33		items.each(function(){
34			placeholders = placeholders.add($('<div class="placeholder">'));
35		});
36	
37		// Hide the gallery if the background is touched / clicked
38		slider.append(placeholders).on('click',function(e){
39			if(!$(e.target).is('img')){
40				hideOverlay();
41			}
42		});
43		
44		// Listen for touch events on the body and check if they
45		// originated in #gallerySlider img - the images in the slider.
46		$('body').on('touchstart', '#gallerySlider img', function(e){
47			
48			var touch = e.originalEvent,
49				startX = touch.changedTouches[0].pageX;
50	
51			slider.on('touchmove',function(e){
52				
53				e.preventDefault();
54				
55				touch = e.originalEvent.touches[0] ||
56						e.originalEvent.changedTouches[0];
57				
58				if(touch.pageX - startX > 10){
59					slider.off('touchmove');
60					showPrevious();
61				}
62				else if (touch.pageX - startX < -10){
63					slider.off('touchmove');
64					showNext();
65				}
66			});
67
68			// Return false to prevent image 
69			// highlighting on Android
70			return false;
71			
72		}).on('touchend',function(){
73			slider.off('touchmove');
74		});
75		
76		// Listening for clicks on the thumbnails
77		
78		items.on('click', function(e){
79			e.preventDefault();
80			
81			// Find the position of this image
82			// in the collection
83			
84			index = items.index(this);
85			showOverlay(index);
86			showImage(index);
87			
88			// Preload the next image
89			preload(index+1);
90			
91			// Preload the previous
92			preload(index-1);
93			
94		});
95		
96		// If the browser does not have support 
97		// for touch, display the arrows
98		if ( !("ontouchstart" in window) ){
99			overlay.append(prevArrow).append(nextArrow);
100			
101			prevArrow.click(function(e){
102				e.preventDefault();
103				showPrevious();
104			});
105			
106			nextArrow.click(function(e){
107				e.preventDefault();
108				showNext();
109			});
110		}
111		
112		// Listen for arrow keys
113		$(window).bind('keydown', function(e){
114		
115			if (e.keyCode == 37){
116				showPrevious();
117			}
118			else if (e.keyCode==39){
119				showNext();
120			}
121	
122		});
123		
124		
125		/* Private functions */
126		
127	
128		function showOverlay(index){
129			
130			// If the overlay is already shown, exit
131			if (overlayVisible){
132				return false;
133			}
134			
135			// Show the overlay
136			overlay.show();
137			
138			setTimeout(function(){
139				// Trigger the opacity CSS transition
140				overlay.addClass('visible');
141			}, 100);
142	
143			// Move the slider to the correct image
144			offsetSlider(index);
145			
146			// Raise the visible flag
147			overlayVisible = true;
148		}
149	
150		function hideOverlay(){
151			// If the overlay is not shown, exit
152			if(!overlayVisible){
153				return false;
154			}
155			
156			// Hide the overlay
157			overlay.hide().removeClass('visible');
158			overlayVisible = false;
159		}
160	
161		function offsetSlider(index){
162			// This will trigger a smooth css transition
163			slider.css('left',(-index*100)+'%');
164		}
165	
166		// Preload an image by its index in the items array
167		function preload(index){
168			setTimeout(function(){
169				showImage(index);
170			}, 1000);
171		}
172		
173		// Show image in the slider
174		function showImage(index){
175	
176			// If the index is outside the bonds of the array
177			if(index < 0 || index >= items.length){
178				return false;
179			}
180			
181			// Call the load function with the href attribute of the item
182			loadImage(items.eq(index).attr('href'), function(){
183				placeholders.eq(index).html(this);
184			});
185		}
186		
187		// Load the image and execute a callback function.
188		// Returns a jQuery object
189		
190		function loadImage(src, callback){
191			var img = $('<img>').on('load', function(){
192				callback.call(img);
193			});
194			
195			img.attr('src',src);
196		}
197		
198		function showNext(){
199			
200			// If this is not the last image
201			if(index+1 < items.length){
202				index++;
203				offsetSlider(index);
204				preload(index+1);
205			}
206			else{
207				// Trigger the spring animation
208				
209				slider.addClass('rightSpring');
210				setTimeout(function(){
211					slider.removeClass('rightSpring');
212				},500);
213			}
214		}
215		
216		function showPrevious(){
217			
218			// If this is not the first image
219			if(index>0){
220				index--;
221				offsetSlider(index);
222				preload(index-1);
223			}
224			else{
225				// Trigger the spring animation
226				
227				slider.addClass('leftSpring');
228				setTimeout(function(){
229					slider.removeClass('leftSpring');
230				},500);
231			}
232		}
233	};
234	
235})(jQuery);