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.
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
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.