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

  1. Do you know how to get round not having the standard urls that galleria produces? e.g #gallery/carpets/carpet3.jpg

    . I imagine that having similar URLs may cause google to detect more than one page, causing duplicate content issues.

  2. Hi Michael,
    I haven’t looked into changing the URLs.
    Since the Galleria links are just anchors within the same page, I don’t think that google should have duplicate content issues as it would with multiple URLs pointing to the same page – but then again SEO is not my area of expertise! 🙂
    If you don’t need the facility to bookmark pages or use the back button etc, you could just set the history option to false.

  3. I am using an older version of galleria and your @rel and duplicate image solution was just what I was looking for. Many Thanks