one digital life

Lightbox, Slimbox, and Caption Links

Ever wonder how websites open up images on top of a webpage, like this? More than likely, they’re using either Lightbox JS or Slimbox. Both are fancy sets of javascripts for doing this kind of thing.

This post is a brief introduction to Lightbox JS and Slimbox, and a quick tutorial on how to put links into the image captions. I won’t go into any great detail on how to use Lightbox or Slimbox, as both sites have step-by-step instructions on how to use them. I’ll just outline some of the key differences.

Lightbox JS

Lightbox JS is the more established version of these scripts. It’s been around for a while. It’s built on two other javascript libraries, Prototype and Scriptaculous. Both are included in the download of Lightbox JS. You don’t need to grab them separately.

I use Lightbox on this site. It’s extremely stable, and I’ve never had any problems with it on either platform or any major browser. The only real downside to Lightbox is its size. Combined, the javascript libraries are over 100kb. That may not sound like much, but if you’re trying to keep your site extra lean, you may not want to add that much more code.

Slimbox

Slimbox bills itself as “the ultimate lightweight Lightbox clone”. It offers all of the same functionality of Lightbox, and adds a few more things as well. Instead of Prototype and Scriptaculout, Slimbox is built on another library, called MooTools. The big advantage here is MooTools + Slimbox is only 17kb… significantly smaller than Lightbox. I won’t go over all the added features, because the developer does that quite nicely on his site. But, I do want to point out two things… if you’ve been using Lightbox, you can easily switch to Slimbox, without updating any of your old content. Slimbox uses the exact same code to call the functions, so it’s easy to cross-grade. And, I have noticed one slight bug in Slimbox when viewing a site in Firefox 2.0 on a PC. If you call up an image, and then scroll the page, the overlay doesn’t always continue to cover the entire page. This doesn’t happen in ie or on a Mac. I haven’t had this problem with Lightbox.

Using Lightbox JS with Moo FX

On a quick side-note, I should also mention that I’ve found what appears to be an incompatibility between Lightbox JS, and Moo FX (another javascript effects library). I was trying to use both libraries on my portfolio site, and they didn’t want to play nice together. That’s when I went looking for an alternative, and found Slimbox. I haven’t had any problems using Slimbox with Moo FX (for MooTools).

Creating Links Inside Captions

Both Lightbox and Slimbox have the ability to insert captions when viewing images. You simply add a title attribute. In my example at the beginning of this post, I added this, title="Beer Bunny". Now, lets say you wanted to add a link into the caption. You might try a title like this:

title="Beer Bunny (< a href="http://www.google.com" target="_blank">Search Google< /a>)"

You would quickly find out that just doesn’t work. But, you’re pretty close to the right answer. What you need to do is trick your browser into thinking that the link is not in that title. You need to swap some of the characters for their html equivalent. For example, quotes (”) would be " and brackets (<) would be <. Using this method, here’s what your title should look like:

title="Beer Bunny (<a target="_blank" href="http://www.google.com/">Search Google </a>)"

Here’s the final result

UPDATE: The code above may not display properly in an RSS reader. I suggest coming to this post in your browser, if you’re interested. Also, the code displays a little wonky in Safari, but hopefully you’ll get the idea.

4 Comments to Lightbox, Slimbox, and Caption Links

1. [...] Support for the Lightview Plus plugin (or Lightbox or Slimbox). [...]
All Narfed Up - WordPress theme designer needed on April 9th, 2008

2. Thanks. Works fine for me in Safari, BTW.

   One question: how to add an inline style to the link? Currently my link color is white, which renders the link invisible.
maohaus on July 11th, 2008

3. Heyyyy,

   Love the scripts. They work great. I’m trying to edit core files in a wordpress gallery2 plugin called wpg2. Trying to make default title say ‘img name (click here to download)’

   Any experience with this plugin? Scratching my head, haha.
Philippe Luchansky on September 26th, 2008

4. hi, have you had any issues with the link inside the lightbox caption not working for Internet Explorer? When I view this same page the lightbox opens up onto white screen w/image in upper left…wondering if you know how to make it work with IE7…thanks.
katie on November 5th, 2008

Leave a comment