Both scripts allow you to add impressive functionality to websites with very little effort. While the built in behaviour of Galleria is often ideal, I had a requirement to integrate lightbox functionality into it recently. I would consider myself a jQuery newbie, so this may not be the most elegant approach, but it seems to do the job on my browsers at least.

Galleria allows you to show a list of thumbnails, along with a larger version of one thumbnail. Clicking a different thumbnail enlarges that image instead. I needed to extend this functionality to give 3 image sizes for some of the gallery images: Clicking a thumbnail would give you a “medium” version, and clicking the medium version would show a larger version again in a lightbox pop-up.

I achieved this as follows:

1. Firstly, I made sure that I had included all the files needed by both Galleria and Slimbox in the head of my page. (The basic usage instructions on both script sites can fill you in on this.)
2. I gave any images in the gallery that needed a large lightbox version a longdesc attribute, setting it to the URL of the large version. (Not ideal semantically I know, but this attribute does expect a URL, and in this case the detailed information about the image is just a bigger, more detailed image, so I can live with that.)
3. Next, I made sure that the clickNext option in my Galleria call was set to false. The clickNext option makes each main gallery image click through to the next to provide an alternative gallery navigation to clicking each thumbnail. However, I need to have some of my main images linking to lightbox pop-ups instead, so I disable this behaviour:
   
$('#mygallery').galleria({
history : false,
clickNext : false
});

4. Here’s the key step. I used the onImage option in my Galleria call, to specify a function to add the lightbox behaviour:
   
$('#mygallery').galleria({
history : false,
clickNext : false,
onImage: function(image,caption,thumb){
//#check if thumbnail indicates that a large version of this pic is available
var large = thumb.attr('longdesc');
if(large)
{
//#if so, link to it and show it in a lightbox
image.wrap('<a href="' + large + '"></a>');
image.parent('a').slimbox();
}
}
});

   A sample onImage function is provided in the Galleria advanced demo, which gave me my function outline. The parameters give you access to the thumbnail image, the main image and the image caption, giving you great freedom to extend the functionality. Here, all I want to do is check whether the thumbnail of this main image has a longdesc specified. If so, that means it needs the lightbox effect. So, I wrap a link around the main image, linking to the large version. Finally, I make a call to the Slimbox API to add lightbox functionality to the link I just added. (Note that I first tried just putting rel=”lightbox” in the anchor tag, but this seemed to have no effect. The rel attribute may have some other purpose in the Galleria script which overrides this.)

A few short steps and you’re done. This is the kind of thing that I thought would be a nightmare. For so many years, JavaScript gave me the shudders, but jQuery makes light work of so much. I’m using it increasingly, but still only now and then, with renewed awe each time. Warning: jQuery has been known to cause giddiness and excessive drooling in web developers.

Firstly, the current version (1.0) does not work instantly with jQuery 1.3. You get error messages like “Syntax error, unrecognized expression: [@rel=…”. This is easily fixed. You just need to open the Galleria file and replace @rel with rel, since @rel has been deprecated (there are only a few occurrences).

Once I was up and running, I realised that I needed to do something a little bit different with this implementation. On clicking a thumbnail, I wanted to replace the content of an existing div on the page with the large version of that image.

Galleria automatically shows the large main image above your list of thumbnails. Alternatively, you can specify an element to place the large image in by specifying the _insert option:


$('.galleria ul').galleria(
{
insert: '#banner'
}


The only problem was that the div I specified (#banner in the above example) already contained some content. I wanted to replace the content with the large image, but Galleria sensibly appends the large image after any existing HTML in the element.

Another quick change to the Galleria script file seemed to change the behaviour so that the large image container HTML is overwritten instead. In the minified version, just search for _wrapper.empty().append(_img); and add the following line beneath it:


_wrapper.empty().append(_img);
/*add line below to overwrite initial non Galleria markup*/
_wrapper.prevAll().remove();
/*end edit*/
_wrapper.siblings('.caption').text(_thumb.attr('title'));