Swipe to go back and forward

assets/css/imageview.css

@@ -33,9 +33,9 @@
 		background-position: 50% 50%;
 		background-size: contain;
 
-		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s;
+		-webkit-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
-		-moz-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s;
+		-moz-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
-		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s;
+		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
 
 		-webkit-animation-name: zoomIn;
 		-webkit-animation-duration: .3s;

assets/js/_swipe.jquery.js

@@ -0,0 +1,108 @@
+(function($) {
+	var Swipe = function(el) {
+		var self = this;
+
+		this.el = $(el);
+		this.pos = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } };
+		this.startTime;
+
+		el.on('touchstart', function(e) { self.touchStart(e); });
+		el.on('touchmove',  function(e) { self.touchMove(e); });
+		el.on('touchend',   function(e) { self.swipeEnd(); });
+		el.on('mousedown',  function(e) { self.mouseDown(e); });
+	};
+
+	Swipe.prototype = {
+		touchStart: function(e) {
+			var touch = e.originalEvent.touches[0];
+
+			this.swipeStart(e, touch.pageX, touch.pageY);
+		},
+
+		touchMove: function(e) {
+			var touch = e.originalEvent.touches[0];
+
+			this.swipeMove(e, touch.pageX, touch.pageY);
+		},
+
+		mouseDown: function(e) {
+			var self = this;
+
+			this.swipeStart(e, e.pageX, e.pageY);
+
+			this.el.on('mousemove', function(e) { self.mouseMove(e); });
+			this.el.on('mouseup', function() { self.mouseUp(); });
+		},
+
+		mouseMove: function(e) {
+			this.swipeMove(e, e.pageX, e.pageY);
+		},
+
+		mouseUp: function(e) {
+			this.swipeEnd(e);
+
+			this.el.off('mousemove');
+			this.el.off('mouseup');
+		},
+
+		swipeStart: function(e, x, y) {
+			this.pos.start.x = x;
+			this.pos.start.y = y;
+			this.pos.end.x = x;
+			this.pos.end.y = y;
+
+			this.startTime = new Date().getTime();
+
+			this.trigger('swipeStart', e);
+		},
+
+		swipeMove: function(e, x, y) {
+			this.pos.end.x = x;
+			this.pos.end.y = y;
+
+			this.trigger('swipeMove', e);
+		},
+
+		swipeEnd: function(e) {
+			this.trigger('swipeEnd', e);
+		},
+
+		trigger: function(e, originalEvent) {
+			var self = this;
+
+			var
+				event = $.Event(e),
+				x = self.pos.start.x - self.pos.end.x,
+				y = self.pos.end.y - self.pos.start.y,
+				radians = Math.atan2(y, x),
+				direction = 'up',
+				distance = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))),
+				angle = Math.round(radians * 180 / Math.PI),
+				speed = Math.round(distance / ( new Date().getTime() - self.startTime ) * 1000);
+
+			if ( angle < 0 ) {
+				angle = 360 - Math.abs(angle);
+			}
+
+			if ( ( angle <= 45 && angle >= 0 ) || ( angle <= 360 && angle >= 315 ) ) {
+				direction = 'left';
+			} else if ( angle >= 135 && angle <= 225 ) {
+				direction = 'right';
+			} else if ( angle > 45 && angle < 135 ) {
+				direction = 'down';
+			}
+
+			event.originalEvent = originalEvent;
+
+			event.swipe = { x: x, y: y, direction: direction, distance: distance, angle: angle, speed: speed };
+
+			$(self.el).trigger(event);
+		}
+	};
+
+	$.fn.swipe = function() {
+		var swipe = new Swipe(this);
+
+		return this;
+	};
+})(jQuery);

assets/js/init.js

@@ -109,16 +109,19 @@ $(document).ready(function(){
 		});
 	}
 
-	$(document)
+	$(document).swipe()
-		.on("touchstart", "#imageview", function(e) {
+		.on("swipeStart", function(e) {
-			swipe.start("#image", e);
+			swipe.start($("#image"));
 		})
-		.on("touchmove", function(e) {
+		.on('swipeMove', function(e) {
-			console.log('move');
+			swipe.move(e.swipe);
-			swipe.move(e);
 		})
-		.on("touchend", "#imageview", function() {
+		.on('swipeEnd', function(e) {
-			swipe.stop();
+			swipe.stop(e.swipe, function() {
+				$("#imageview .arrow_wrapper.previous").click();
+			}, function() {
+				$("#imageview .arrow_wrapper.next").click();
+			});
 		});
 
 	/* Document */

assets/js/swipe.js

@@ -7,23 +7,15 @@
 
 swipe = {
 
-	object: null,
+	obj: null,
-	position: {
+	tolerance: 150,
-		x: null,
-		y: null
-	},
 
-	start: function(object, e) {
+	start: function(obj, tolerance) {
 
-		console.log('start with ' + object);
+		console.log('start with ' + obj);
 
-		swipe.object = object;
+		if (obj) swipe.obj = obj;
-
+		if (tolerance) swipe.tolerance = tolerance;
-		if (swipe.position.x===null)
-			swipe.position.x = e.originalEvent.pageX;
-
-		if (swipe.position.y===null)
-			swipe.position.y = e.originalEvent.pageY;
 
 		return true;
 
@@ -31,30 +23,34 @@ swipe = {
 
 	move: function(e) {
 
-		var offset = {
+		console.log(e);
-			x: -1 * (swipe.position.x - e.originalEvent.pageX),
-			y: -1 * (swipe.position.y - e.originalEvent.pageY)
-		}
 
-		if (swipe.position.x!==null) {
+		e.x *= -1;
-			$(swipe.object).css({
-				'-webkit-transform': 'translateX(' + offset.x + 'px);',
-				'-moz-transform': 'translateX(' + offset.x + 'px);',
-				'transform': 'translateX(' + offset.x + 'px);'
-			});
-		}
 
-		console.log(offset);
+		swipe.obj.css({
+			WebkitTransform: 'translateX(' + e.x + 'px)',
+			MozTransform: 'translateX(' + e.x + 'px)',
+			transform: 'translateX(' + e.x + 'px)'
+		});
 
 	},
 
-	stop: function() {
+	stop: function(e, left, right) {
 
-		console.log('stop');
+		console.log('stop with ' + e.x);
 
-		swipe.object = null;
+		if (e.x<=-150) left();
-		swipe.position.x = null;
+		else if (e.x>=150) right();
-		swipe.position.y = null;
+		else {
+			console.log('reset');
+			swipe.obj.css({
+				WebkitTransform: 'translateX(0px)',
+				MozTransform: 'translateX(0px)',
+				transform: 'translateX(0px)'
+			});
+		}
+
+		swipe.obj = null;
 
 	}