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,

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/