• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL
 

Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL

on

  • 1,260 views

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

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/

Statistics

Views

Total Views
1,260
Views on SlideShare
1,260
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL Replicating the Swipe Gesture iPhone Gallery for mobile web – images linked to URL Document Transcript

    • Replicating the Swipe Gesture iPhone Gallery for mobile web –images linked to URLBlog 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 orrather tap-able. So when a user taps on an image he is redirected to a URL. You can specify separate URL’s ofyour choice for each image. The default behavior of the swipe gesture and replicating it is still there. I have justadded the feature of linking the images to URL.Try the demo in your mobile browser (iOS orAndroid): 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 customattributelink. <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 onthat particular image. Note that link is a custom attribute. You can add custom attributes to HTML elements.On the script partThis is where a little understanding is required. In my previous posts – part1 and part2 I have discusses in detailsabout the swipe gesture and how using touch events I have managed to achieve it. If you seethe JavaScript code, I have registered touch events that listen to the user’s finger movements. So if you notice aswipe gesture is actually a combination ofSwipe Gesture = touch start + touch move + touch endIt is only in the touch end event listener that we manipulate the net distance moved and based on that we swipethe images. Now, since we also need a tap/click to URL feature for each image so if you directly add a redirectioncode in either touchstart or touchend event listeners then every time you try to swipe it will take to to a URL. Andthen even the swipe is affected. So as soon as you start to swipe it, it will redirect you to a URL, which is exactlywhat 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 endSo there is no touch move in a tap event for an image. So this is the concept that helps in making the Swipe aswell as the Tap to URL work together. When a user swipes across the screen he is actually covering some netdistance, so your start point is not same as the end point. But when you tap on an image your start point and endpoints are same before you release your finger. Hence in a tap the net distance is zero. So based on that I madechanges 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 theuser 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 thedemo. To download the code follow the link given below.Download codeYou can download the source code here.