Updates
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) 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 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.
6) Vertical swipe gesture – for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.
Now, back to the actual post –
In this tutorial we will talk about building up a Swipe Gesture photo gallery for iPhone, iPod using web technologies – HTML5, CSS3 and JavaScript. To begin with, you might have viewed pictures in your iPhone or iPod photo library and may remember how you used to swipe your finger across the screen of your device to view the next or the previous image in the gallery. The same thing we are going to replicate and make a mobile web app. Our app will run full screen on the mobile safari browser so this gives it a native look n feel. The features of this mobile web app replicate the iPhone photo library’s default behaviors,
- Gently swipe across the screen left or right to view the neighboring images.
- Flickering of images. Swipe across quickly to view neighboring images. I say it harsh swipe across the screen.
- Current Image comes back if you do not swipe it enough across the screen.
- When the beginning or end of the list is reached, no matter how much you swipe the image always comes back.
First, view a desktop version of the demo to get a feel, drag your mouse over the picture left or right to view other images and try out the features that I have just talked about (View in web-kit browsers – Chrome or Safari): http://jbk404.site50.net/html5/mobile/swipey/
The same thing we are going to replicate for the mobile device. Now, our app is targeted for mobile web kit browsers so it will run even on Android browsers. That’s the good thing about a mobile web app, write once run everywhere.
Below we have two images of the app running in my iPod Touch,


What is a Swipe gesture?
When you use your finger to drag on the mobile device’s screen it is called a swipe gesture. It is equivalent of a mouse drag over a desktop browser. Remember that our app is a single touch application and not a multi touch app. Even the default iPhone photo gallery is a single touch app. That means you can use only one finger at a time to operate. Check out this video to get an idea:
[vimeo http://vimeo.com/19363026]
The basic concept to start with
I have a picture above that explains the entire process. We have images placed inside <li> elements which acts as slides and all these <li> elements are placed inside an <ul> element. The <li> elements are laid out horizontally since we are building a horizontal gallery. This can easily be done by using float:left CSS property.
<div id="wrapper"> <ul id="panelContainer"> <li> <img src="img/1.jpg" width="100%" height="100%"/> </li> <li> <img src="img/2.jpg" width="100%" height="100%" /> </li> ..... </ul> </div>
Now, we basically have to move the <ul> element (our slides container) left or right using CSS3 transition and transformations (Hardware accelerated CSS3 transitions, this makes the animation much smooth) based on the user’s swiping gesture interaction on the device screen. Ofcourse we have the four features that we have talked about earlier and need to keep that in mind. So our transition and movements should follow these features and we will have to code it out accordingly. We will talk about it later. Finally we have all our slides and the container inside a wrapper. The wrapper is a <div> element with overflow:hidden. The wrapper occupies the entire browser screen and acts as a masking element. This ensures that only one slide/image is seen at a time.
Preparing the slides
As I have already talked about, each image is placed inside a <li> element and let’s consider it to be a slide. So, we place multiple such slides inside an <ul> element which is our slide container (Refer the HTML block above). Normally, in an unordered list the <li> elements are placed vertically. To place the slides horizontally, this is how to do it,
#wrapper ul { list-style:none; margin:0; padding:0; -webkit-transition: -webkit-transform 0.3s linear; } #wrapper ul li { float:left; }
We have set a float:left to our slides. And to the unordered list – the <ul> element we have set list-style:none, padding and margin to 0. One important thing to note is that for our slides to be placed horizontally we have to set enough width to the slide container (<ul>) so that there is room for all the slides and there is no slide wrapping i.e placing slides in a new line after full width is reached. I will talk about this in the java script part. First, let’s check out the full HTML and CSS needed for our app,
body { margin:0; padding:10px; } #wrapper { overflow:hidden; } #wrapper ul { list-style:none; margin:0; padding:0; -webkit-transition: -webkit-transform 0.3s linear; } #wrapper ul li { float:left; } <!DOCTYPE html> <html> <head> <title>Swipe Gesture - Gallery</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" /> <link href="css/styles.css" rel="Stylesheet" /> </head> <body> <div id="wrapper"> <ul id="slideContainer"> <li> <img src="img/1.jpg" width="100%" height="100%"/> </li> <li> <img src="img/2.jpg" width="100%" height="100%" /> </li> <li> <img src="img/3.jpg" width="100%" height="100%" /> </li> <li> <img src="img/4.jpg" width="100%" height="100%" /> </li> <li> <img src="img/5.jpg" width="100%" height="100%"/> </li> <li> <img src="img/6.jpg" width="100%" height="100%"/> </li> <li> <img src="img/7.jpg" width="100%" height="100%"/> </li> </ul> </div> </body> <script type="text/javascript" src="js/scripts.js"> </script> </html>
We have a total of 7 images/slides. You can add as much images/slides as you want and the app will adjust automatically. This looks pretty simple isn’t it. Now, let’s check the java script code needed for handling all our interactions in our next part- Part2
Link to desktop version of the demo : http://jbk404.site50.net/html5/mobile/swipey/
That was sort of inspiring! Totally unpredicted. Now I’m sure what I am heading to complete tomorrow 🙂 http://www.ctctradeshows.com
Hi there, You’ve done a fantastic job. I’ll definitely digg it and personally suggest to my friends. I’m sure they will be benefited from this site.
Hi, Neat post. There’s a problem with your web site in internet explorer, would test this… IE still is the market leader and a huge portion of people will miss your excellent writing due to this problem.
Thanks Nicky. I will take care of this.
My wife and i ended up being thankful that Jordan managed to carry out his web research using the ideas he obtained out of the site. It is now and again perplexing to simply possibly be releasing thoughts some people have been trying to sell. And we also grasp we have the blog owner to be grateful to for that. The main illustrations you made, the easy web site menu, the friendships you will make it easier to foster – it is everything astounding, and it’s aiding our son and the family understand that situation is amusing, and that’s exceedingly essential. Thanks for all!
many thanks 🙂
Great tutorial. Just wanted to say good job in persisting the pattern and not getting all fancy with Ajax. By keeping it as simple as you have allows for endless applications of the script. So thanks.
Thanks John…..
[…] I used this site to get kind of what I’m going for Here. […]
mmm I think I’m going to use this to browse pages instead of images 🙂
yeah you can use it, you will have to make some changes to the code though 🙂
Thanks.
Thank you for building this tutorial. I’ve been trying gestures like this in FlashBuilder and am finding HTML5 and Javascript much easier to work with. That said, I’ve have great difficulty getting the images to show up horizontally instead of vertically. I followed closer the areas in the CSS and Javascript where you make those points but still getting only vertical images.
Any thoughts?
Thanks, yes touch gestures are easier in HTML and javascript. Also I am not clear about your horizontal images. What do you exactly mean by horizontal images? Is it the landscape mode of the mobile device you are referring to?
I’m referring to these portions of your tutorial:
“As I have already talked about, each image is placed inside a element and let’s consider it to be a slide. So, we place multiple such slides inside an element which is our slide container (Refer the HTML block above). Normally, in an unordered list the elements are placed vertically. To place the slides horizontally, this is how to do it,
We have set a float:left to our slides. And to the unordered list – the element we have set list-style:none, padding and margin to 0. One important thing to note is that for our slides to be placed horizontally we have to set enough width to the slide container () so that there is room for all the slides and there is no slide wrapping i.e placing slides in a new line after full width is reached. I will talk about this in the java script part. First, let’s check out the full HTML and CSS needed for our app,”
Two things are important for that,
1) You have to set float:left to the individual slide elements.
2) Give enough width to the slide container so that it can place all the slides horizontally i.e width = (number of slides) * width_one_slide
It should come.
Hey joseph, what if I want the slides to move every 5 seconds and keep repeating how do i add that?
Your design is very simple and awesome.
Thank for your help.
Ravi,
You can add a javascript timer for the slides to move automatically and then call the method that transitions the position of the slides. For repeating do you mean a circular movement?
Thanks.
Joseph
Yes, that what i meant.
I want to show different products in slide gallery on the mobile web.
In that case you do not need to do all the complexities of the swipe code. You can simply build a sliding gallery. Use the same base structure (the
–- ) as my example and then use simple javascript timer to move the images at intervals.
Hi can I ask where the images and files are available? I noticed some people where commenting that they were using them. I am horrible at coding and they would help me a load.
Hi,
You can get the images from: http://jbk404.site50.net/html5/mobile/swipey/img/
And the source file from the demo link in the post itself. Just right click to view source or download it.
Let me know if you have issues.
Joseph
Anyway to make those photos load in dynamically?
You can have Ajax calls, but then it will be slow and some pictures might not load while the user swipes into it. This will be a bad user experience.
Joseph, do you know if there is some way to hook into the end of the image transition to be able to call your own function? I have six separate slideshows and want an alert to pop up when when the six slideshows show the same image.
Cory,
You can do that. Try the webkitTransitionEnd event handler. So when a transition – sliding of image ends the event is dispatched and in result you can call a method to handle it.
Google it and you can find some examples. Let me know if you have any trouble.
Thanks
Thanks Joseph,
One of my friends did recommend that and we tried it but still could not get it to work. I am not that familiar with javaScript thought so who knows if I am missing something or doing it wrong.
Thanks again for your timely response
-Cory-
if you go to http://sws.mnstate.edu/shufeltco/368/final/index.html you can view what I have. I don’t know if that will help or not but it’s worth a shot
Alright, let me give it a shot. I will update you…
Cory,
I have mailed you the details. Let me know if you get it.
Thanks.
Hi Cory,
Check out the code below, this should help you out. Open the javascript file – the .js file and check to see if you find something similar as below. Then you have to add the lines in your code that I have highlighted below. This will add a transition end event and you can see the console message in your browser after each slide has finished a transition.
Now to match the 5 images and complete the game this is what I feel you can do – you can introduce counters for each of the five slides, update each counter when there is movement in the corresponding slide, finally match all the five counters and if they match your images should be in the patter and puzzle solved.
moveLeft: function() {
swipey.currentDistance += -swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + “ms”;
//using CSS3 transformations – translate3d function for movement
swipey.slideContainer.style.webkitTransform = “translate3d(” + swipey.currentDistance + “px, 0,0)”;
swipey.slideContainer.addEventListener(“webkitTransitionEnd”,swipey.transitionEndHandler,false);
},
moveRight: function() {
swipey.currentDistance += swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + “ms”;
swipey.slideContainer.style.webkitTransform = “translate3d(” + swipey.currentDistance + “px, 0,0)”;
swipey.slideContainer.addEventListener(“webkitTransitionEnd”,swipey.transitionEndHandler,false);
},
comeBack: function() {
swipey.slideContainer.style.webkitTransitionDuration = 250 + “ms”;
swipey.slideContainer.style.webkitTransitionTimingFunction = “ease-out”;
swipey.slideContainer.style.webkitTransform = “translate3d(” + swipey.currentDistance + “px, 0,0)”;
swipey.slideContainer.addEventListener(“webkitTransitionEnd”,swipey.transitionEndHandler,false);
},
transitionEndHandler: function(){
console.log(‘test’);
swipey.slideContainer.style.webkitTransitionDuration = 0 + “ms”;
swipey.slideContainer.removeEventListener(“webkitTransitionEnd”,swipey.test,false);
}
Let me know if you need nay help. By the way your concept of the Game is really amazing. I mean you guys really can innovate and create things. We Indians are busy with our family and household tensions and miss out on innovations. Good work, I must say.
Thanks.
Joseph
Joseph,
Thanks! I did find the code you mentioned in my .js file but when I added the highlighted text you gave me the photo galleries disappear.
Also, you have done a great job on creating this slider gallery javascript. Its the best I’ve seen so far.
Ah, it should not have dissappeared though. Let me send you over my code. I have emailed you.
[…] HTML5 developer, Joseph, has defined an HTML5 process for replicating some basic swipe gestures. His post has two parts and creates a useful example, Here is the link to his desktop version […]
[…] them in details in my previous posts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demo below. Open the link in a webkit browser in either your mobile device […]
[…] I used this site to get kind of what I’m going for Here. […]
Can you give the source code to me, I would like to see the javascript and css in order to make to this slide work…Please….
Just right click the demo application in your browser and select View Source. For the JS and CSS, click on the links in the source code. Let me know if you are able to do it.
Hi, thanks for this – really nice. I’ve noticed a little bug when using this on an iPad, when you attempt to pinch to zoom (I realise this won’t work as the meta tag is in place) it seems to interfere with the swipe code and stops swiping working unless you do a really long swipe.