Just a quick update. I have made little changes to the original demo so that now the images are clickable or rather tap-able. So when a user taps on an image he is redirected to a URL. You can specify separate URL’s of your choice for each image. The default behavior of the swipe gesture and replicating it is still there. I have just added the feature of linking the images to URL. Try the demo in your mobile browser (iOS or Android): http://jbk404.site50.net/html5/mobile/swipey/mobile_version/fix/ For the full post download the file or visit the blog post link: http://jbkflex.wordpress.com/2012/07/17/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-images-linked-to-url/

1. Replicating the Swipe Gesture iPhone Gallery for mobile web –
images linked to URL
Blog post link: http://jbkflex.wordpress.com/2012/07/17/replicating-the-swipe-gesture-iphone-
gallery-for-mobile-web-images-linked-to-url/
Just a quick update. I have made little changes to the original demo so that now the images are clickable or
rather tap-able. So when a user taps on an image he is redirected to a URL. You can specify separate URL’s of
your choice for each image. The default behavior of the swipe gesture and replicating it is still there. I have just
added the feature of linking the images to URL.
Try the demo in your mobile browser (iOS or
Android): http://jbk404.site50.net/html5/mobile/swipey/mobile_version/fix/
Tap on any image in the gallery to open a URL. Also you can swipe on the images.
What are the changes made?
On the HTML side, I added the URL’s to the <img /> element in the index.html file, I have added a custom
attributelink.
<li>
<img src="img/1.jpg" width="100%" height="100%" link="http://www.google.com"/>
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%" link="http://www.yahoo.com"/>
</li>
Similarly, all the other <img /> elements have a link attribute that specifies the URL to redirect when user taps on
that particular image. Note that link is a custom attribute. You can add custom attributes to HTML elements.
On the script part
This is where a little understanding is required. In my previous posts – part1 and part2 I have discusses in details
about the swipe gesture and how using touch events I have managed to achieve it. If you see
the JavaScript code, I have registered touch events that listen to the user’s finger movements. So if you notice a
swipe gesture is actually a combination of
Swipe Gesture = touch start + touch move + touch end
It is only in the touch end event listener that we manipulate the net distance moved and based on that we swipe
the images. Now, since we also need a tap/click to URL feature for each image so if you directly add a redirection
code in either touchstart or touchend event listeners then every time you try to swipe it will take to to a URL. And
then even the swipe is affected. So as soon as you start to swipe it, it will redirect you to a URL, which is exactly
what we do not want. Now, if you notice a tap event it is a combination of,
Image Tap (Tap to a URL) = touch start + touch end
So there is no touch move in a tap event for an image. So this is the concept that helps in making the Swipe as
well as the Tap to URL work together. When a user swipes across the screen he is actually covering some net
distance, so your start point is not same as the end point. But when you tap on an image your start point and end
points are same before you release your finger. Hence in a tap the net distance is zero. So based on that I made
changes to the event handler for touchend event in the script file,

2. swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);
And then in the endHandler method I added this,
if(swipey.distanceX == 0) //if the intention is to tap on the image then open
a link
{
var link_url = event.target.getAttribute("link"); //read the link from <img />
element
window.open(link_url,"_blank");
}
This checks if the net distance is zero. And if it is so, then it reads the link attribute value and then redirects the
user to the URL specified by link.
This is it, now the code is capable to handling both user swipes and user tap/click to URL. You can checkout the
demo. To download the code follow the link given below.
Download code
You can download the source code here.