After hearing David mention a lightroom gallery plugin that was made for the iPhone, and trying to show someone that site (no flash on the iPhone), and my own (too slow), I thought I should do something. I don’t have lightroom. I have Aperture, but have never tried the web sites it can create. I just decided to create something on my own.
If you go there now with an iPhone you will see the iPhone specific site. If you don’t have an iPhone, this is what it looks like:
On the left is the first page displaying the albums in vertical mode. The horizontal mode shows all four in a row. On the right is the blue album in horizontal mode. In vertical mode the images are two wide, and you scroll a bit more. Press an image and you see just that image in the browser. I didn’t make pages for each image. Each album has that nav bar at the bottom like the bottom of the first page.
I discovered a couple of things to pass on while doing this. The first is the screen. At 480×320, it is small. Be careful about image sizes. They really can’t be larger than 320 ever, or it won’t look right in the vertical mode. It they are too big for the screen, safari will scale the while page. Not what you want.
Since you are makeing this for an iPhone, you can use some specific iPhone/Safari attribues. These items can go in your stylesheet:
-webkit-text-size-adjust:none; -webkit-border-radius: 10px;
The first line in your body tag will prevent text from being resized. Carefull with this. Users may expect to be able to do this, so use sparingly. The second line used in a div will give you the round corners. We don’t need to be cross platform here.
-moz-border-radius: 10px; max-width: 600px;
One other thing iPhone specific. I put this line in the head of my html:
This will cause iPhone Safari to limit the screen to it’s native dimensions and not allow pinching to zoom the screen. Again, be careful with this. If you want your pages to act like an application, use it, if you want them more like a web page, don’t.
I cheated with the images. I decided to use the same images from my site and using CSS, have the browser scale them. This usually doesn’t work that well. It would be faster loading to use smaller images, and browsers don’t use great scaling algorithms. I have been impressed with how safari does this though.
Lastly, we need to switch to this version if somone comes with an iPhone. I decided to do the browser check in php. I now have an index.php that looks like this: (code adapted from the wstouch plugin)