Lightbox is a fairly popular javascript script that allows you to easily create an image overlay with special effects for your website. I have been using it for my gallery since version one and I continue to use it. In version three of my gallery I introduced the option to use highslide instead of lightbox which allows you to embed HTML into the overlay by default without any modification.

There are a number of modifications for Lightbox that allow you to use HTML in the Lightbox overlay but using my method the use of an alternative script won't be necessary. In the FAQ over at the Lightbox website they answer the HTML embedding question by telling you that you first must first convert quotes and greater and less than symbols into their html entity equivalents.

For example:

<a href="images/image-4.jpg" rel="lightbox" title="my link">Image</a>
    

This method will work but, besides having to sort through all that gibberish whenever you want to make a link, there is one flaw. It uses the "title" attribute and as we all know the title attribute is used for when you mouse over an image and want to see the description. Therefore whenever you mouse over your image you're going to see your gibberish. Not exactly what we're going for here. We obviously need to make it so it doesn't use the "title" attribute. Luckily, it doesn't need to. This is a design choice made inside of the lightbox script so to change this all we need to do is edit the source code.

What attribute should you change it to? While any of the standard HTML attributes should work I personally prefer to use the id attribute because in the Lightbox script that specific attribute isn't being used for anything else. If you have never worked with javascript before I recommend you go and download Notepad++. It will make this experience much easier for you. In Notepad++ to search for something press ctrl+F and to go to a certain line of code press ctrl+G.

The exact javascript file you need to edit is in the "/js/" folder and is named "lightbox.js". The line you will need to edit is line 218 and 223 in Lightbox v2. In different versions it may vary. If you do not see the word "title" anywhere on those lines then doing a search for "title" should yield your results.

You should see something like this:

if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

Simply change the attribute "title" on both of your lines to the attribute of your choice. I have even highlighted it for your convenience. Once finished you may save and exit. The next step is to edit your HTML to correspond to your new attribute. This is as easy as changing "title" to "id" in your img tag.

Your HTML tag should now look like this (if you used the ID attribute):

<a href="images/image-4.jpg" rel="lightbox" id="my link">Image</a>
    

Now you're done. You may now use HTML in your lightbox description. However, you still have to deal with writing all that gibberish. If your images are dynamically handled by a PHP script you'll be happy to hear that there's a little function called "htmlentities()" that will deal with all that for you. I use the exact function in my gallery script.

If you're unfortunate enough to be coding your gallery entirely in HTML without the help of a server side language I have created a little program that might help you out. I made it in Quickscript in fact! You may use the program on my website by going here.

Now you are truly done! You are now free to use the HTML you encode into html entities in your Lightbox descriptions without having any nasty titles or having to use a lightbox alternative. If you have any quetions feel free to contact me.