One of the biggest drawback of the lightbox-style plugins are that you are not allowed to use html code in your image description. If you need to bold or emphasize some part of the description title you are kinda screwed. Of course, you don’t want to use a long and boring description, but if you want to make a list (for example) you are some how limited. Not by lightbox plugin but the html language itself.

How image description works?

This is the basic structure for lightbox-enabled links. The lightbox plugin use that title to add a small description when the big image is showed. What if – let’s say – you need to emphasize the word ‘extra’? How would you proceed? You could use some html tags ( <em> ) but with some validation error and maybe some unpredictible result on various browsers (or parsers, if you use xhtml). The solution? Use BBcode!

BBcode for the rescue!

The above code is transformed to:

And some js magic:

String.prototype.replaceAll = function(strTarget, strSubString){
	var strText = this;
	var intIndexOfMatch = strText.indexOf( strTarget );
		while (intIndexOfMatch != -1){
 		strText = strText.replace( strTarget, strSubString )
		intIndexOfMatch = strText.indexOf( strTarget );
 	};
	return( strText );
};

The reason that we use this custom function is that the javascript internal replace function will work only for first item found. Now, if you use jQuery, you have to do this:

$('a[rel=lightbox]').each(function(){
	var t=$(this);
	t.attr( 'title', t.attr('title').replaceAll('[i]', '').replaceAll('[/i]', '').replaceAll('[b]', '').replaceAll('[/b]', '') )
}).lightBox();

What’s just happened? The BB code was replaced with html tags. Of course, if you need more tags, you can add it below

Be careful!

I didn’t test it on large sets of images (i had only 6 to 12 images per page) so I have no idea if will affect the performance in any way!