But, still to support different device screen sizes you will need to make changes to the CSS or the asset (images) sizes. The demo that I have worked on, I have considered the iPhone resolution – 320 x 416.
Check out the demo (same link works in mobiles and computers): http://jsphkhan.github.io/swipe_gesture_common/
So this new updated demo is the latest one including all the previous updates. Following are the features,
- Fix – Flickering issue in iOS and Android – Read the post.
- Images linked to separate URL – Read the post.
- Common code. Write once run everywhere. Same demo works in mobiles and computers.
- Basic swiping feature – which I have developed in my previous tutorials – Start here.
I will not go into the details, you can check my previous posts for that. I will just update you with the changes I made in the script.
Detect device type and automatically assign events – Touch vs Mouse events
I have written a completely separate post for this. You can have a look at it. Just to give you a hint, this is what I did,
//detect touch and then automatically assign events isTouchSupported: 'ontouchstart' in window, /*mapping touch events to mouse events. Automatic registration of event based on the device. If touch enabled then touch event is registered. and if desktop browser then mouse event is registered.*/ swipey.startEvent = swipey.isTouchSupported ? 'touchstart' : 'mousedown', swipey.moveEvent = swipey.isTouchSupported ? 'touchmove' : 'mousemove', swipey.endEvent = swipey.isTouchSupported ? 'touchend' : 'mouseup',
Another automation has been done in the way the page co-ordinates are read when the user is interacting with the app,
var eventObj = swipey.isTouchSupported ? event.touches : event;
You can find this inside the startHandler() and the moveHandler() – event listener functions. Then when we need to read the page co-ordinates we do this,
swipey.distanceX = eventObj.pageX - swipey.startX;
This is it, these are some of the major changes in the code. You can download the source and try it out. Download link is given below. Again, I would recommend you to go through my previous post to fully get a hang of it.
1) 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.
2) Images linked to URL – Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.
3) 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.
4) 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.