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?

2 Replies to “Enhancing the Display of Images on Your Site with Slimbox”

  1. Hi Justin –

    Thanks for stopping in!

    Actually, the Lightbox Slideshow was pretty cool, and I did want to use it, but unfortunately I couldn’t get it to work well enough to justify it.

    I’m not sure exactly where the breakdown was – I don’t/didn’t use either of the other two scripts, so they added a bit more load time to the page, and it seemed that even after visiting the page, the load time was there. I don’t know if this was in processing elements on the page or what.

    In any case, I’ll definitely keep an eye out for your new version, and perhaps I’ll need to switch again!

  2. Thanks for including my script in the review; I’m the author of Lightbox Slideshow.

    My script is beefier than other options, but this is largely due to the fact that it requires two commonly used JavaScript libraries: Prototype and Scriptaculous. If you are already using those libraries on your site, my script only adds an extra 28 KB.

    Also, the extra 10% page load time should only apply to the first page view. The scripts should be cached for any additional page views.

    Finally, I’m working on an updated version of the script, which will hopefully have a smaller file size 🙂

Comments are closed.