Replicating the iPhone Swipe Gesture – Vertical swiping

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.

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 moved vertically.

Screenshot of vertical swiping through images
Screenshot of vertical swiping through images

Code Changes
There 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 move the gallery by that distance in the y-axis. I have described the basic logic completely in my previous post. So check it out to have a clear understanding of making a swipe gesture effect with 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.

CSS
I have commented the line below. That’s not needed now.

#wrapper ul li
{
   /*float:left;*/
}

HTML
No changes.

JavaScript
I do have some changes. Let’s see what they are,

1) Firstly startX and distanceX have been renamed to startY and distanceY, since we are only 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,

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 as follows,

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 this as "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 details
if ((swipey.direction == "down" && swipey.currentDistance == 0) || (swipey.direction == "up" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredHeight))) {
  swipey.comeBack();
}

7) Final changes are inside moveUp(), moveDown() and comeBack() methods. They are similar changes. So let’s look at one of them,

swipey.currentDistance += -swipey.preferredHeight; //currentDistance has now to 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.

3 thoughts on “Replicating the iPhone Swipe Gesture – Vertical swiping

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s