jQuery: adding Slimbox lightbox effect to Galleria

Two excellent jQuery scripts which I rely on time and time again are the Galleria image gallery and Slimbox 2, a lightweight Lightbox clone which has recently switched to using the jQuery framework over MooTools (happy days!).

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. 🙂

30 comments Write a comment