As I’ve been working on the re-design of my website, I had to decide what to do about displaying large images that I previously displayed using Lightview. In my opinion Lightview is pretty nice when viewing my larger images on a full size screen, and even on my iPad, but it totally fails on my mobile phone, a Droid Razr Maxx. There is a newer version of Lightview that works better, but I’m really not happy with how small the navigation and close buttons are. I’ve got big fingers, and selecting something that is very small is hard for me. I have perfect vision, but what about people that do not?
Searching the for something better yielded no wonderful solution. I searched Google for “Responsive Lightbox” and browsed through a few forum threads and blog posts, where people were suggesting different lightbox scripts. Colorbox, which I
‘ve used before, was suggested as a good solution, but didn’t turn out to work well on my mobile phone.
I also tried Flare, MetroBox, JackBox, and a few others. MetroBox and JackBox are actually pretty cool, and I think MetroBox ended up being my favorite, but I decided that since all I really wanted was a back button, I’d use a more traditional solution.
PHP to the Rescue
So here’s how I handled displaying the images. First I created a controller that handles requests for images. When a request comes in, the URI segments are used to determine what image to use. I used PHP’s imagecreatefromjpeg and imagesx functions to quickly check the width of the image, and the width and image path are passed to the view. In the view, the width is used to set a CSS max-width for the image. The image is otherwise displayed as wide as possible, which is perfect for little mobile devices.
The view is quite simple. A background image is applied to body, and a couple of back buttons were added to send the site visitor back to the previous page. I put one back button on top of the image, one below, and then centered everything on the page. You can see this working nicely for most of the images in my portfolio.
I think what I like most about this is that I don’t need to load any javascript and css files just to display an image. I’m not linking the images together as a gallery, not using flash, videos, or anything fancy, and I didn’t feel like paying for a new lightbox script. Except for displaying the image right in the browser, there’s nothing else that could be this lightweight. Last but not least, the back buttons are nice and big.