Trying to get jquery lightbox to work

This morning I was trying to get a simple lightbox set up on my photo website for showing larger versions of some screengrabs I'd used in a blog post. While I could write something myself, it seemed like it would be much easier to use a script someone else had already written than re-invent the wheel.

So I downloaded the jquery lightbox plugin, set it up, but then it didn't work! After some investigating I found the problem was that they were using the nice 'n' easy jquery syntax for creating HTML. They had written the HTML using HTML syntax and not XHTML syntax (which is what my website uses), and so there were unclosed <img> tags that were causing the lightbox function to break.

So I fixed this by self closing the image tags:

$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image" /><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '" /></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '" /></a></div></div></div></div>');

I was slightly surprised at this, as I was of the understanding that jquery would just parse the HTML string and then use DOM methods to create the elements and set the attributes as needed. So I guess that either jquery doesn't do this and just does something like innerHTML, or else maybe it checks your syntax against the DOCTYPE and throws an error if they don't match up.

Now the lightbox worked okay, but I didn't really want the 'back' and 'next' buttons on the lightbox since you would need to read the bit of the article between the images to understand what the next image was showing.

To fix this, I edited the script at about ln. 45, and added a new showNav setting:

   keyToNext:    'n',  // (string) (n = next) Letter to show the next image.
   showNav:     true,
   // DonŽt alter these variables in any way

Then I altered the _show_image() function so that the navigation would only be activated if showNav was true.

function _show_image() {
   $('#lightbox-loading').hide();
   $('#lightbox-image').fadeIn(function() {
    _show_image_data();
    if(settings.showNav){
     _set_navigation();
    }
   });
   _preload_neighbor_images();
  };

Then when I call the lightbox initializer, I just set showNav to false

 $('a[rel*=lightbox]').lightBox({
 "showNav":false,
 "otherSettings":...
});

After getting the lightbox working how I wanted I took my broken hard drive down to the post office to post it back to Western Digital. It's been quite showery lately, I did get a bit of rain on the way back home, but not much. I was actually quite hot by the time I got back home (wearing a jumper).

After lunch I got my website working with the latest versions of jquery and jquery-ui. There wasn't actually any problem with the latest versions compatibility wise, but I had to minify them a bit more (removing new lines) and fit them in with my combined javascript file.

I spent quite a while trying to find a minified version of the jquery-ui ui-lightness CSS, but it seems there isn't one. I couldn't put it through a minifier as it uses some comment hacks, and the minifiers I know of remove comments (which you want, but not when a comment is actually a hack). So I just left it as it is - each CSS declaration only spans a single line anyway, I just wanted to remove the extra spaces between properties and values and the comments that weren't needed for hacks.

Next I made an adapter for my Tokina 10-17mm fisheye so I can use the Cokin P adapter (filed down to only hold a single filter) on it. I can't see any vignetting looking through the lens from 12mm, and it looks to be just about usable at 11mm (a little bit of the cardboard 'adapter' can be seen in the bottom right hand corner). Whether you get any vignetting when taking photos is a different thing though, and something that I haven't tried yet.

After that I put out the washing, then updated my photo website.

Mauser came home, and Beatles Rock Band had arrived for him, so we set about putting it together.

After dinner we went on Beatles Rockband for a bit, then I took some photos of my FZ5 on a monopod, and processed the photo(s).