Replicating the iPhone Swipe Gesture – Vertical swiping

515
-1

Published on

For those who wanted a vertical swiping feature to the the swipe gesture gallery that I created earlier, this post has a new demo and minimal explanation about a vertical swipe gesture gallery. Now you can swipe the images up or down.
I will not go through the basics once again as I have explained them in details in my previous posts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demo below. Open the link in a webkit browser in either your mobile device or your computer.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2013/02/14/replicating-the-iphone-swipe-gesture-vertical-swiping/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
515
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Replicating the iPhone Swipe Gesture – Vertical swiping

  1. 1. Replicating the iPhone Swipe Gesture– Vertical swipingFor the full post, visit the actual blog post link:http://jbkflex.wordpress.com/2013/02/14/replicating-the-iphone-swipe-gesture-vertical-swiping/For those who wanted a vertical swiping feature to the the swipe gesture gallery that Icreated earlier, this post has a new demo and minimal explanation about a vertical swipegesture gallery. Now you can swipe the images up or down.I will not go through the basics once again as I have explained them in details in my previousposts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demobelow. Open the link in a webkit browser in either your mobile device or your computer.Demo link: http://rialab.jbk404.site50.net/swipegesture/vertical/Below is a screenshot of the gallery in action. You can see that the images are being movedvertically. Screenshot of vertical swiping through imagesCode ChangesThere are not any major changes in the code. The logic is still the same. For vertical movement,you just need to calculate the distance covered by your finger/mouse in y-direction and then
  2. 2. move the gallery by that distance in the y-axis. I have described the basic logic completely in myprevious post. So check it out to have a clear understanding of making a swipe gesture effectwith simple javascript and css3 transitions/transformation.I will quickly talk on the changes that I made to make the swipe gesture go from horizontal x-direction to vertical y-direction.CSSI have commented the line below. That’s not needed now.#wrapper ul li{ /*float:left;*/}HTMLNo changes.JavaScriptI do have some changes. Let’s see what they are,1) Firstly startX and distanceX have been renamed to startY and distanceY , since we areonly concerned with y-axis.2) Next change is in the dimension of the slideContainer <ul> element,swipey.slideContainer.style.width = swipey.preferredWidth + "px";swipey.slideContainer.style.height = (swipey.slides.length *swipey.preferredHeight) + "px";The height value has now increased to a multiple of the number of slides.3) Max distance now depends on the height,swipey.maxDistance = swipey.slides.length * swipey.preferredHeight;4) Then inside the startHandler() method, startY is initialized as follows,
  3. 3. swipey.startY = eventObj.pageY;Remember we are concerned with y-direction for vertical movement.5) Then inside moveHandler() method we calculate the net distance moved in y-direction asfollows,swipey.distanceY = eventObj.pageY - swipey.startY;And we translate the <ul> container in y-axis using CSS3 Tranformations,swipey.slideContainer.style.webkitTransform = "translate3d(0," +(swipey.distanceY + swipey.currentDistance) + "px,0)";6) Next changes lies inside the endHandler() method,if (swipey.distanceY > 0) { swipey.direction = "down"; //since we are moving down. Earlier we set thisas "right".}if (swipey.distanceY < 0) { swipey.direction = "up"; //since we are moving up. Earlier we set this as"left"}//the following conditions have been discussed in detailsif ((swipey.direction == "down" && swipey.currentDistance == 0) ||(swipey.direction == "up" && swipey.currentDistance == -(swipey.maxDistance -swipey.preferredHeight))) { swipey.comeBack();
  4. 4. }7) Final changes are inside moveUp(), moveDown() and comeBack() methods. They are similarchanges. So let’s look at one of them,swipey.currentDistance += -swipey.preferredHeight; //currentDistance has nowto be updated by the height, since we are moving in y-dir.And then we translate the <ul> container in y-axis using CSS3 tranformations.swipey.slideContainer.style.webkitTransform = "translate3d(0," +swipey.currentDistance + "px,0)";And that’s it. These are enough for the images to be swiped vertically.Check out the demo once again. In case you need the code, just right click and view the source.For any queries feel free to post a comment below.

×