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

24 thoughts on “Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL

  1. I’m using this script to create a horizontal slider within a website – it seems like the swiping is locked to left and right, and I have to tap and slide vertically above or under the ul to be able to continue scrolling through the site. Where in the js is the ability to re-enable vertical scrolling?

    Thanks!

  2. I have a burning question that I hope you can help me with. How do I make anchor tags (links) work inside of the draggable/scrolling panels. I have been working with another drag swipe javascript plugin that has the same issue, where links just are not clickable when touched (or tapped) when viewing on the iphone for example. Any advice you can give?

    • Hi Lorea,

      I guess we can do that. I have not tried it out as of yet. But I will give it a shot and update you. The demo in this post has a tap to open URL for the images. So we can go on the same lines. Anyways, I will update you.

      Thanks.
      Joseph

  3. Hi. Thanks for this. It’s pretty much exactly what I was looking for. Just a couple of questions:
    1) Is it possible to make the linked to URL open in the same page when tapped (I added target=”_self” but this didn’t make any difference.
    2) The swipe and tap work on iPhone but only the swipe appears to work on Android. When I tap the screen nothing happens. Any ideas?
    Thanks again.

    • Hi David,

      1) This is not working since I have used window.open() in the javascript to open the links. So it always opens in a new window.
      2) I will check this out again. Should work on both. I mean it was working when I posted it.

      I will look into both the issues.

      Thanks.
      Joseph

    • Hi David,

      I have updated my post.
      Addressing your issues,
      1) I have updated this in my post. Pls have a look at it. You can use _self inside window.open() method instead of _blank.
      2) It is working on Android. I cross checked it.

      Thanks.
      Joseph

  4. Thanks very much, Joseph. That’s great. I had the Android user update the firmware on their Samsung phone and now the swipe and tap works on their phone in Chrome and the built in browser but not in Opera, for some reason. But that doesn’t matter as long as it works on the default browser.
    Cheers,
    David

    • Hi David,

      Great that it is working for you.
      The swipe is not working in Opera since I have specifically used -webkit- prefix in my code. Just chage the -webkit- CSS3 prefix in the CSS and the JS file to -o- for Opera and it will start working.

      Thanks.
      Joseph

  5. Hi joseph,
    Thanks very much for your code.

    I’m using your code in my web mobile and I tested also your “images linked to URL” and all works perfectly, but I will need to map more than one link on the same image (actually I use and ). There is some way to do the same with your code in mobile web?

    Thanks

    Davide

  6. I’ll right away grab your rss as I can’t to find your e-mail subscription link or
    e-newsletter service. Do you have any? Please allow me
    recognize in order that I could subscribe. Thanks.

    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here
    click here

  7. Have you ever considered publishing an e-book or guest authoring on other
    sites? I have a blog based upon on the same topics you discuss and would really like to have you
    share some stories/information. I know my subscribers would appreciate your work.
    If you are even remotely interested, feel
    free to shoot me an e mail.

  8. Hey, just wondering if you can place multiple images underneath each other and swipe each individual? Kind of like a A horizontal to lode or a glasses display where each level rotates separate.
    Also, each photo has a hot link to it but could you use a link map, you know one of those old map that defines link areas? So parts within the photo are tap-able and lead to different overlays?

    Thanks for your articles, they are soo great, you are devine to me haha.

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