Sliding touch photo gallery for iPhone – HTML5, CSS3

This tutorial speaks about a simple sliding touch photo gallery for iPhone. The app is meant to run on the mobile safari web browser. We start off by looking at a demo first and then talk about the code in details. Note that the same logic and implementation will work even on Android devices, you just need to correct the dimensions/positions and place the elements according to screen resolution.

Demo Link: http://jbk404.site50.net/css3/slidinggallery/ (open in your iPhone/iPod or Android device’s web browser)

Gallery with the thumbnail images

The images used in the demo are not of great quality or appeal as I am not a Photoshop expert. Once you have cool assets you are good to go.

The demo is all about having two panels, one with the thumbnail images and the other panel with the corresponding bigger image of the thumbnail selected in the first panel. The two panels have been placed side by side – horizontally and they slide in and out of the viewport to give a sliding effect. The sliding of panels uses the same concept (using CSS3 transitions and transformations) that I discussed in one of my earlier post. Here in this tutorial I will not go into the details of how to create sliding touch panels. You can refer my previous post.

The two panels are placed horizontally inside the wrapper using float:left

As you have seen in the demo when you tap on a thumbnail image the entire panel slides out and a second panel with the corresponding larger image slides in. That is what we will achieve at the end of this post. Let’s begin by creating the grid that will hold the thumbnail images in panel1.

Create the thumbnail image grid in Panel1
First, let us create our thumbnail gallery. We will use HTML and CSS to design and place the thumbnail images. The HTML code block needed is shown below,

<section id="panel1">
  <ul>
    <li class="normal"><img src="images/thumb1.jpg"/></li>
    <li class="normal"><img src="images/thumb2.jpg"/></li>
    <li class="normal"><img src="images/thumb3.jpg"/></li>
    <li class="normal"><img src="images/thumb4.jpg"/></li>
    <li class="normal"><img src="images/thumb5.jpg"/></li>
    <li class="normal"><img src="images/thumb6.jpg"/></li>
    <li class="normal"><img src="images/thumb7.jpg"/></li>
    <li class="normal"><img src="images/thumb8.jpg"/></li>
    <li class="normal"><img src="images/thumb9.jpg"/></li>
  </ul>
</section>

As you can see I have placed each thumbnail image inside an <li> element. And all the <li> elements are in turn placed inside an <ul> element. Now, to arrange them in a grid I do this in the CSS,

#panel1 ul
{
  list-style:none;
  width:280px;
  position:absolute;
  left:40px;
  top:90px;
}

#panel1 ul li.normal
{
  float:left; /* this is important to place the thumbnails in a grid */
  margin-right:8px;
  margin-bottom:4px;
  background-color:#fff;
  padding-top:3px;
  padding-left:2px;
  padding-right:2px;
}

#panel1 ul li img
{
  height:70px;
}

Also if you notice, each thumbnail image is initially given a classname of normal as none of them is selected. Once selected a thumbnail is assigned a classname of selected (this is done in the script block). This is done to differentiate between the last selected thumbnail image and the rest of them in the grid (I do it by giving a red border to the selected thumbnail, you can see it in the picture above). The CSS needed is below,

#panel1 ul li.selected
{
float:left;
margin-right:8px;
margin-bottom:4px;
background-color:#ff0000;
padding-top:3px;
padding-left:2px;
padding-right:2px;
}

Creating Panel2
Panel2 is relatively simpler to build. It has the back button at the top. When user taps on the back button, panel2 slides out to the right and panel1 slides in again from the left. The larger image is displayed by the Image element with id = bigImage. Below is the screenshot of Panel2, followed by the HTML code,

Panel2 screenshot
<section id="panel2" style="margin:0 !important; padding:0 !important;">
  <img id="backBtn" src="images/back.png" />
  <div id="bigImageHolder"><img id="bigImage" src="" /></div>
</section>

Adding touch events to thumbnail images
When you tap on a thumbnail image I get the id of the thumbnail and using that id I determine the bigger image i.e its path. I have named the images as big1, big2…. etc so I just concatenate the id to the string value “big”. I have zipped the images used in the demo. You can download it at the end of the tutorial. But before that we need to add touch events to the thumbnails. Let’s add it in our script block.

gridGallery.thumbnailArr = gridGallery.panel1.getElementsByTagName("img");
for (var i = 0; i < gridGallery.thumbnailArr.length; i++) {
  gridGallery.thumbnailArr[i].addEventListener("touchend", gridGallery.taptHandler, false);
  gridGallery.thumbnailArr[i].setAttribute("id", i + 1);
}

As you can see above in the script block, I got the reference to all the thumbnail images and store them in the thumbnailArr array. Later I loop through the length of the array and assign a unique id to each thumbnail image and also register a touchend event listener. Now, that I have registered a touch event to the thumbnail images I need to handle when the event is generated i.e when user taps on a thumbnail image. For that I have created the tapHandler function.

tapHandler: function(event) {
  if (event.target.id != "backBtn") {
    gridGallery.distanceX = -320;
    gridGallery.currentSelectedImage = event.target.parentNode;
    gridGallery.prevSelectedImage.className = "normal";
    gridGallery.currentSelectedImage.className = "selected";
    gridGallery.prevSelectedImage = gridGallery.currentSelectedImage;
    document.getElementById("bigImage").src = "images/big" + gridGallery.currentSelectedImage.getElementsByTagName("img")[0].getAttribute("id") + ".jpg";
  }
  else {
    gridGallery.distanceX = 0;
  }
  gridGallery.panelContainer.style.webkitTransform = "translate3d(" + gridGallery.distanceX + "px, 0, 0)";
  event.preventDefault();
}

If you see inside the tapHandler function I have an if-else block. I will talk about the else part later. The if block starts by checking if the touch event is generated by the thumbnail images. I am doing this because I have used the same tapHandler event listener function for the back button as well. Note that the back button is also registered to listen to touch events. I will talk on this shortly. Now, if we look inside the if block, I set distanceX property a value of -320, this is for translating the panel container a distance of 320px to the left. I have hard coded the value as 320 since I am specifically building this app for iPhone and iPod Touch and they have a width of 320px in the portrait mode. You can use the browser window width for a more generic result – window.innerWidth. Then I get the reference of the current selected thumbnail image and assign it a class name of selected, this will immediately set the border of the selected image to red. Also I set the class of the previous selected thumbnail to normal to remove its red border. Then finally I get the path of the corresponding larger image that will be shown in panel2. I get the id of the current selected thumbnail and then manipulate the name of the larger image. As I have already told, that I have named my images as big1, big2…. etc. So once I get the id I concatenate it to the path string to get the larger image. This is simple I guess.

Adding touch event to the Back button 
When user taps on the back button panel2 slides out and panel1 slides in from the left again. For this to happen we need to add touch event to the back button as well. This is how to do it,

gridGallery.backBtn = document.getElementById("backBtn");
gridGallery.backBtn.addEventListener("touchend", gridGallery.tapHandler, false);

If you notice I have used the same event function (tapHandler) for handling the touch event generated by the back button. This is the reason why I used the if-else check inside tapHandler. When user taps on the back button the else part is executed. Inside it, I only set the distanceX to zero as now the panel container will be translated back to its original position. Nothing more is needed.

else {
    gridGallery.distanceX = 0;
  }

After the if-else block I have written a very important line,

gridGallery.panelContainer.style.webkitTransform = "translate3d(" + gridGallery.distanceX + "px, 0, 0)";

This is where the actual sliding of the panels happen. I have used CSS3 Transformation – translate3d function to move the panel container in the x-direction. The distance to be moved is determined by distanceX property which I have talked about earlier. I will not go into the concepts of CSS3 transformation and transitions now, you can read my previous post about sliding touch panels.

One thing you might be confused about my java script code is the syntax I have used to write. I have used the JSON pattern of writing my code wherein I have encapsulated everything inside an object. You can view the full source code in the desktop browser. Just open the demo link in any desktop browser and view source.

The link to the demo once again:  http://jbk404.site50.net/css3/slidinggallery/ (open in your iPhone/iPod or Android device’s web browser)

Download the zipped images folder here.

Update
1) Is there a way to make it so it is more responsive, so when changing to landscape or resizing the browser window, the panels automatically respond without a browser refresh?

Answer: I have an updated post regarding this. Please have a look at it here.

6 thoughts on “Sliding touch photo gallery for iPhone – HTML5, CSS3

      • This not run on browser chrome. where to run this source. this still images not work no linking images.

      • The example is meant for mobile browsers, so check it in either iPhone/iPod web browser or Android device’s browser. The images are not linked now, you can link it by making slight modification in the code.
        Thanks.

      • This example are not run on mobile browsers. Will you, please provide Sliding touch photo gallery.zip file on my mail. As its define on page. Thanks

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