As promised in Roll Your Own WordPress iPhone Theme, I’ve applied the same custom iPhone theming process to my photo gallery. It follows the look and feel of the iPhone’s own photo application: albums appear in a list, photos in a grid, and individual photos largely by themselves. I also reproduced its coolest feature: you can scroll through photos by clicking the left and right sides to go back and forward!
While this leveraged CSS to tweak the same set of full screen pages, I found there was a good bit of cleanup needed in the original Gallery2 theme, which still had tables instead of divs. There’s also some Javascript XPath and DOM manipulation to strip out the tables that create the drop shadows around photos and thumbnails. Finally, the “scrolling” photos are accomplished using a custom image map based on the dimensions of each photo.
I’m quite pleased with the end result; it makes viewing photos on the iPhone quite nice!
Update: By request, the code for my theme is now available; the iPhone specific parts are marked in theme.tpl, theme.js, and iphone.css. It’s still a bit rough, so you may need to make some adjustments for use on your own site.
Download the iPhone Gallery2 Theme
del.icio.us/mbotos
January 23rd, 2008 at 11:38 am
Matt… you are having a serious problem distinguishing its and it’s. Can you find the error in this post?
January 23rd, 2008 at 11:55 am
Fixed my bad grammar
March 13th, 2008 at 9:33 pm
Hey there,
I’m very impressed with your work on the Gallery2 iPhone optimization. Is there a download link for it?
I’m actually one of the few people in Brazil using the phone, but I love it and would like to have my portpholio available in both desktop and iPhone versions (like my blog).
Thanks in advance.
Guddy
September 13th, 2008 at 10:15 am
There are a fewe rough things left behind, like Portfolio and “Rally in the Valley 2008″ that seem to be hard coded in there. Good start, though.
September 29th, 2008 at 4:36 pm
Very cool idea, I think I shall try out your code on my Gallery site…