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.
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.
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.
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.
You save my life! thanks so much!
Thanks so much for this! I prefer this than the rel method for lightbox 2 (makes the whole caption a link)
This is exactly what I’ve been wanting to do! You are excellent! :-)
This is exactly what I was looking for EXCEPT that the link now shows up when I hover over the image. Is there any way to hide that? I thought the alt tag would override it but it doesn’t. I just want the title to show up not the link.
Hey, I just wanted to say you’re a genius!! As the last person before me posted, I don’t want the link to show up when I hover over the image. Is there a way to fix this?
Is there any way to have the captions at the top of the image instead of the bottom?
Thank you! Thank you! Thank you! I nearly died trying to get links in a caption to work. Thanks for making it clear!
Thanks very much :) It’s working properly.
Well its any way to remove next button from last image of gallery
Hi there! I am trying to put a “Download Original” link into the caption. Can you please help me with this. I don’t want the link to take me to a web page but rather download the image that shows in the Lightbox preview pane.
Thanx a mil!
Hi Chiquitha, for the link itself you would simply use the url of the image file. By default the browser will open the file instead of download it. You can use an htaccess file to force the download. I can’t give you the specifics off the top of my head, so I suggest you google something like, “force jpg to download with htaccess”. Good luck!
Hi Paul..Just want to say Thanks so much for this! The link is working GREAT!
I had a question regarding the link…Is there any way to have the link content open inside the lightbox rather than open in a new window?
Thanks!
@Matt, all you have to do is remove the target attribute: target=”_blank”
or change “_blank” to “_self”
@Paul (author of article), I am having trouble with your code… although I’m not trying to put a link in there. I am trying to use the audio tag to play a voice-over, to tell the user about the picture.
Thanks! (in advance), to anyone that can provide some insight to my problem :)
Hi Paul,
I read the whole Instruction here, all the comments below and search for reasons in the whole Inet, but can’t find out what I’m doing wrong.
I’m using lightbox 2.51.
If I put links the title as shown I see them in the caption and hovereffects are in function, but if I click the link nothing happens.
A friend (also webworker) have the same problem with the same version.
Do you no, what we are doing wrong?
This is the code-snippet from an example we are using:
<img src="images/2013/01_2013.jpg" height="400"
alt="Band member dolls created for The Sheepdogs video ‘Feeling Good'” />
Question: How do I make the text that is in my { alt } section part of my caption title but underneath? Like–>
Client: Westside Studio / Photography: Matt Barnes
Band member dolls created for The Sheepdogs video ‘Feeling Good’
When I click the image and enlarge in lightbox the pop up only shows my title text, but if I add the description in my title it all blends into one line… HELP!!