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 computer or mobile browser (webkit based browsers only): http://rialab.jbk404.site50.net/swipegesture/common/
Tap/Click 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 attribute link.
<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,
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.
To open links/URL in same window or page – use _self instead of _blank in window.open()
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.
Updates/Other related posts
1) Creating a swipe gesture gallery – My initial post on the topic. You can start here.
2) Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.
3) Common code and example for mobiles and computer browsers - I have developed a common universal code for mobile browsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safari in computers, and then the default web browsers in iOS and Android mobiles. The major changes are in the javascript code, where I have automated the user event handling process. What this means is that for mobile devices touch based events are registered and listened to and then for computer browsers mouse based events are registered and handled by the script automatically. This way there is no need to hard code touch events for mobiles and mouse events for computers. The same code works everywhere. Find the post here. There is a demo and also a download link.
4) Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.
5) Auto scrolling swipe gesture gallery - Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.
