Galleria – A Javascript Image Gallery

For my business, Northern Lights Technology, I was trying to decide which gallery application to use for my portfolio. I decided upon Galleria, a nice and simple gallery using the jQuery API. One problem I immediately found was that I couldn’t create multiple paragraphs. I had to fix that! I set about looking through the source code and discovered an easy enough fix.

You need only make the following changes:

// insert the caption
_wrapper.siblings('.caption').text(_thumb.attr('title'));

Becomes:

// insert the caption
 var caption = _thumb.attr('title').replace( new RegExp( "\\n", "g" ) , "<br />" );
 _wrapper.siblings('.caption').html(caption);

Simple as that. You can use the same regular expression based modification above to allow yourself simple formatting. Below, I’ve added support for bold and emphasized text, as well as links.

var caption = _thumb.attr('title');
caption = caption.replace( /\n/g , "<br />" );
caption = caption.replace( /\[b\](.*?)\[\/b\]/gi, '<strong>$1</strong>' );
caption = caption.replace( /\[i\](.*?)\[\/i\]/gi, '<em>$1</em>' );
caption = caption.replace( /\[url\=(.*?)\](.*?)\[\/url\]/gi, '<a href="$1">$2</a>' );
caption = caption.replace( /\[url\](.*?)\[\/url\]/gi, '<a href="$1">$1</a>' );
_wrapper.siblings('.caption').html(caption);

The above code uses BBCode essentially, converting [b]Text[/b] to bold text, [i]Text[/i] to italic text, and [url=http://google.ca/]Link Name[/url] to a link. If you are curious as to the g and i symbols after the regular expression, the g makes it replace every match instead of only one, and the i makes it case insensitive.

Leave a Reply