Enhancing the Display of Images on Your Site with Slimbox

I’m not a big user of images – though I have a digital camera, I typically end up using it less than I probably should. I think one of my goals for next year will be to actually get some of the images off the memory card in the camera and let people see the pictures I’ve taken. One step in that process is to get them in a format that makes them nice looking. A single page without much around it, as you often see on a web page, can be downright ugly. Enter Lightbox.

This JavaScript framework is a fairly simple way to display pictures with a sort of frame around them – the image is actually assigned a special HTML segment, and the surrounding section of the page is blacked out, giving the viewer a much more pleasing experience than a simple image without much around it. There are three problems with Lightbox. The first is that it’s big, the second is that it’s slow to load and the third (and most important) is that it doesn’t work! Luckily, there are some options.

One of the coolest options is Lightbox Slideshow. This modification takes off from where Lightbox stopped, and adds some nice modifications such as an automatic slideshow and a working implementation. It’s really easy to implement, too. The only problem is that it’s even larger! the JavaScript files alone for the slideshow were well over 130KB, and load time on my pages increased by more tan 10% when I enabled it. So unfortunately, it’s out the window too. Enter Slimbox.

As the name implies, this version of the code has been slimmed-down so that it fits in a much smaller space (the files are roughly 1/6th that of the Lightbox Slideshow), and what’s more is that it loads a lot faster. This is all possible thanks to the Mootools framework.

While it’s still going to load a bit slower than if you didn’t have it at all, you have to be willing to make some trade-offs. Unfortunately if you want to provide functionality, the scripts will have to run. In this case, the page load time ticked up, but it’s usually by just a second or so, and with no noticeable loss of functionality.

You don’t get the slideshow functionality, but you do get the same previous and next options as in the standard Lightbox, plus you can use your arrow keys to navigate. It’s really a very nice implementation. You can even launch Slimbox with a JavaScript function – something that I haven’t seen elsewhere.

I’ve tried a few different ways of including pictures on the site, and I also have looked at integrating some external services – more on that is coming in the new year. But the largest problem that I had was in displaying the images in a way that was pleasing to the user, and I think that Slimbox really offers a nice solution. What do you think?