jQuery Galleria: overwriting div content with large image

On implementing a photo gallery using the handy Galleria jQuery plugin recently, I ran into a a couple of issues.

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'));

5 comments Write a comment