Kill tooltips/keep captions in Lightbox

February 28th, 2009

Using Lightbox? Me too. The version I’ve been working with lately is the jQuery-based one by Krewenki. It’s a handy little plugin and seems to have all the basic stuff that you know and love from the older script.aculo.us-based Lightbox.

If you use Lightbox much, you’ll know that you add captions to the large version of your photo by placing the caption information in the title attribute of the link tag you wrap around the thumbnail image. If you want to get fancy with your captions like I did, you’ll want to put some HTML in the title attribute – maybe a title and an unordered list for some bullet points.

But when you hover the thumbnail, you see a nasty-looking tooltip filled with raw HTML. It took me some time to figure out the best way to get rid of the tooltip on hover but replace it in time for the larger version of the picture to be able to see it for the caption. Making the tooltip disappear was trivial, but replacing it turned out to be a bit tricky – each time I clicked, I kept getting blank captions.

Turns out that this is because I was attaching to the onclick event. Onclick fires when both mousedown and mouseup have happened, so the callback happens too late – the link is already loading. When I switched my title replacement event to be mousedown, the caption showed up just fine.

The jQuery snippet below blanks the title attribute on all Lightbox thumbnail links when the cursor enters the link’s space (defined by the dimensions of the thumbnail image) in the mouseenter event, and then replaces it on either mouseleave or mousedown. This injects the title back into the DOM in time for the caption to be used by Lightbox.

At least that’s my theory for why it works. I should probably find some technical backup for this somewhere in the annals of JavaScript, but being as that’s pretty unlikely, I’ll just go ahead and post the working code. Note that unlike some versions of Lightbox out there, Krewenki’s works by having you designate Lightbox elements by placing a “lightbox” class on the anchor, as opposed to setting the anchor’s rel attribute. It could be argued that this is slightly out of spec with how HTML is supposed to work, but it’s a pretty esoteric thing to compare link “relationship” designators with the appropriate semantic space for classes. And anyway, I don’t really care that much… :-p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Removes title attr on Lightbox thumbnail links
// replaces for caption on mousedown
function killLightboxTooltips () {
  $.each($('.lightbox'), function(i, link) {
    var title = $(link).attr('title');
    $(link).bind("mouseleave mousedown", function () {
      $(this).attr('title', title);
    });
   
    $(link).bind("mouseenter", function () {
      $(this).attr('title', "");
    });
  });
}

2 Responses to “Kill tooltips/keep captions in Lightbox”

  1. Strodtbeck says:
    November 18, 2010 at 5:12 pm

    Darn. . . I thought I finally found a fix. Tried to use this with Colorbox but no luck. Can’t figure it out either. . . dang.

    Reply
  2. Brian says:
    October 27, 2011 at 1:05 pm

    Hm… my problem is that when I have my gallery just static with no captions, it puts big spaces between the rows for where, what I’d assume would be the caption would go… is there any way to get rid of that space and just make it into like a grid shape?

    Reply

Leave a Reply