Sunday, July 24, 2011

Showing an Image Gallery for HTML5 Mobile Web Site

Last Friday, I got task that was to be done as quickly as possible.

What Was the Task?

There was a HTML5 based mobile web site that few people from my company were working on.  On a certain page, we were showing thumbnail images

Page with Thumbnail images on it

If user wants to see a bigger image, they can click on one of the thumbnail images, a new page opens up which shows only the image that user had clicked.

New page is opened,
it shows only the image that was clicked
 If user wants to see the next image, they have click back button on the browser and then click the other image in the thumbnail list.  Certainly this was not very user friend behavior.  There was no easy way to see all the images one after the other.  User had to navigate between the pages to see all the images.

Hence, I was given the task to implement some sort of a image gallery which will enable users to navigate between the images easily.

The Approach

Initially, I thought that the task was simple.  The possible approaches that immediately came to my mind where
  • Full Home Grown Solution - This meant, writing some JavaScript on my own to show Next and Previous links (on the page where we are showing the image) and then cycle through the thumbnail images.
  • Reuse an existing image gallery JavaScript library - This meant, Googling a little, finding what image gallery JavaScript libraries are available and using the one that fits the our requirements.
I am firm believer that, one should not reinvent the wheel!  Hence, for obvious reasons, I ruled out the first approach.  I narrowed down my task, to find the Image Gallery JavaScript that would suite our requirements.

Lets look at the HTML used to show the thumbnails and then the bigger images.

As you can see, the HTML used to show the thumbnails and full images is pretty standard.  Thumbnail images are wrapped with an Anchor (<a>) tag with href attribute pointing to the full image.  Because of this, when user's click on the thumbnail, a new page with full image URL opens up.

I was in no mood to change the HTML or use completely different approach to show the Image Gallery.  I wanted to do as little as possible to get the desired results, I am a lazy developer you see!

We were using jquery on our HTML5 Mobile Website.  I was thinking, there should be a ready made jquery plugin, which would show the images one after the other and I would have to do little or no work.  Googling a little, I found many JQuery based Image Gallery JavaScript that looked promising.  I will list down a few of my not so successful attempts at showing the Image Gallery and then finally the one worked for me.

The JQuery LightBox Plugin

I am a fan of this plugin.  I had used this plugin in the past for few of my other projects.  I like everything about this plugin, the ease of use, the end result etc, its completely awesome!  Hence, I decided to give this plugin a go.

I opened up the JQuery LightBox examples URL on an iPhone to see how it behaves on the phone.  This is what I get
LightBox examples URL opened in iPhone 3Gs
There is no doubt that it works on the iPhone.  But somethings were not right.
  • The preview image is still very small 
  • Next, Previous and Close links are difficult to find and click
  • One needs to Zoom In on the page to actually see the bigger preview image or click next, previous links.
  • Does not support swipe to change the image.
  • Clicking the Browser Back button takes the users to the Previous page in the browser history, it should have closed the full image preview dialog and stayed on the same page.
I realized that I was trying to fit one solution to all problems.  Its evident that although the JQuery LightBox does an awesome job at showing the Image Gallery for web based application, I needed a JavaScript library that was build/optimized for Mobile devices.  

Please note that, the issues that I just mentioned are not JQuery LightBox specific issuesThere is no doubt that the authors of JQuery LightBox have done a fantastic job at developing an Image Gallery JavaScript library, that does an awesome job at showing Image Gallery on web pages build for Computer and not for mobile devices.

I decided to search for Image Gallery JavaScript libraries that were build for the Mobile devices.

Touch Gallery

Finally, I found a JQuery based Image Gallery JavaScript library that was build for mobile devices.  The Usage was simple enough, all I had to do was
  • Add the <meta> tag for the viewport
  • Include the TouchGallery javascript library
  • Select the appropriate Anchor (<a>) elements and call touchGallery JavaScript function on them.
Updated HTML looks like

JavaScript to integrate the Touch Gallery looks like

So far so good, lets look at the rendered result
Preview image opens up in full screen
using Touch Gallery
Better? Yes, the result is definitely better then the JQuery LightBox plugin.  Lets look at things that I like and dislike about this plugin.

The Good
  • The preview image is bigger and occupies full screen width
  • User can change images using a swipe
The Bad
  • There are no buttons to go Back and Forward.  User might not know in the first go that, they could swipe to change the image.
  • Big black sections at the top and bottom of the preview image
  • There is no close link, which users can click to go back to the page which shows all the thumbnails
  • Clicking the Browser Back button, takes the users to the Previous page in the browser history, it should have closed the full image preview dialog and stayed on the same page.
Seems like we were able to solve a few problems but still there are a few negatives.

Now what?  Write a custom solution?  NO! Never do that!  Obviously people must have faced this problem before and there has to be a JQuery based JavaScript library that fits my requirements, after all, its not Rocket Science!

I decided to find a better solution!

PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.  It provides visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.  So far it seems to fit the bill.  Lets integrate it and see the results.

Integrating it was not all that difficult, all I had to do was
  • Add the <meta> tag for the viewport
  • Add the PhotoSwipe and dependent JavaScript files.
  • Add the PhotoSwipe css
  • Select the appropriate Anchor (<a>) elements and call photoSwipe on them.
Update HTML looks like

The Script to integrate the PhotoSwipe JavaScript library looks like

Looks simple right, lets look at the results
PhotoSwipe in action
Portrait mode with navigation links
PhotoSwipe in action
Ladscape mode with navigation links
As you can see, the results are wonderful.

The Good
  • The preview image is bigger and occupies full screen width
  • User can change images using a swipe
  • There are navigation links using which users can go back, forward, close the dialog and even play the images as slide show
  • Clicking the back button of the browser show the original page with thumbnails on it!
PhotoSwipe fits the bill completely!

IMHO there is no one solution that fits in all situations, but certainly there is a solution out there in the wild, that will fit your requirements!  If you don't find it in the fist go, try harder!
Have some Fun!