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/

1. Replicating the iPhone Swipe Gesture
– Vertical swiping
For 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 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
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

2. 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,

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 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();

4. }
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.