Browse Source

Fixed the swipe animation

Tobias Reich 8 years ago
parent
commit
dce837171b
6 changed files with 19 additions and 8 deletions
  1. 0 0
      dist/main.css
  2. 0 0
      dist/main.js
  3. 2 2
      src/scripts/init.js
  4. 2 2
      src/scripts/photo.js
  5. 14 3
      src/scripts/swipe.js
  6. 1 1
      src/styles/_imageview.scss

File diff suppressed because it is too large
+ 0 - 0
dist/main.css


File diff suppressed because it is too large
+ 0 - 0
dist/main.js


+ 2 - 2
src/scripts/init.js

@@ -78,7 +78,7 @@ $(document).ready(function() {
 		$(document)
 
 			// Fullscreen on mobile
-			.on('touchend', '#image', function(e) {
+			.on('touchend', '#imageview #image', function(e) {
 				if (swipe.obj==null || (swipe.offset>=-5&&swipe.offset<=5)) {
 					if (visible.header()) header.hide(e, 0)
 					else                  header.show()
@@ -86,7 +86,7 @@ $(document).ready(function() {
 			})
 
 			// Swipe on mobile
-			.swipe().on('swipeStart', function() { if (visible.photo()) swipe.start($('#image')) })
+			.swipe().on('swipeStart', function() { if (visible.photo()) swipe.start($('#imageview #image')) })
 			.swipe().on('swipeMove',  function(e) { if (visible.photo()) swipe.move(e.swipe) })
 			.swipe().on('swipeEnd',   function(e) { if (visible.photo()) swipe.stop(e.swipe, photo.previous, photo.next) })
 

+ 2 - 2
src/scripts/photo.js

@@ -100,7 +100,7 @@ photo.previous = function(animate) {
 
 			delay = 200
 
-			$('#image').css({
+			$('#imageview #image').css({
 				WebkitTransform : 'translateX(100%)',
 				MozTransform    : 'translateX(100%)',
 				transform       : 'translateX(100%)',
@@ -131,7 +131,7 @@ photo.next = function(animate) {
 
 			delay = 200
 
-			$('#image').css({
+			$('#imageview #image').css({
 				WebkitTransform : 'translateX(-100%)',
 				MozTransform    : 'translateX(-100%)',
 				transform       : 'translateX(-100%)',

+ 14 - 3
src/scripts/swipe.js

@@ -36,14 +36,25 @@ swipe.move = function(e) {
 
 swipe.stop = function(e, left, right) {
 
-	if (e.x<=-swipe.tolerance)     left(true)
-	else if (e.x>=swipe.tolerance) right(true)
-	else if (swipe.obj!==null) {
+	// Only execute once
+	if (swipe.obj==null) return false
+
+	if (e.x<=-swipe.tolerance) {
+
+		left(true)
+
+	} else if (e.x>=swipe.tolerance) {
+
+		right(true)
+
+	} else {
+
 		swipe.obj.css({
 			WebkitTransform : 'translateX(0px)',
 			MozTransform    : 'translateX(0px)',
 			transform       : 'translateX(0px)'
 		})
+
 	}
 
 	swipe.obj    = null

+ 1 - 1
src/styles/_imageview.scss

@@ -21,7 +21,7 @@
 		right: 30px;
 		bottom: 30px;
 		left: 30px;
-		transition: top .3s, right .3s, bottom .3s, left .3s;
+		transition: top .3s, right .3s, bottom .3s, left .3s, opacity .2s, transform .2s;
 		will-change: transform;
 
 		display: flex;

Some files were not shown because too many files changed in this diff