Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 1

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,

  1. Gently swipe across the screen left or right to view the neighboring images.
  2. Flickering of images. Swipe across quickly to view neighboring images. I say it harsh swipe across the screen.
  3. Current Image comes back if you do not swipe it enough across the screen.
  4. 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,

An image/slide showing up in portrait mode
An image/slide showing up in portrait mode
Changing of slides
Change of slides when swiping

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:

The basic concept to start with
concept of the swipe gallery

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/

38 thoughts on “Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 1

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

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

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

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

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

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

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

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