Making GalleryView items clickable with FancyBox

I am currently making use of the GalleryView jQuery plugin which feels great but it lacks a functionality that I needed: clicking on the images to show them in a modal dialog.

I therefore integrated a separate plugin called FancyBox that handles modal functionality beautifully.

To do this, I first did a minor change to jquery.galleryview.js, where I added the following underneath var img = $('<img />');:

img.attr('class', 'clickable');
img.attr('alt', gvImage.attrs.title);

This is so that I can access the images in the GalleryView image gallery whenever an image is clicked, and I reference them with a class clickable. I also fetch the description of the image and store it in the alt tag.

Then I simply hook to those images and open fancy box with the current image that's displayed on the slideshow:

$('.clickable').live('click', function(e){ 
    var img = $(this);
    var imgSrc = img.attr('src');
    var imgDesc = img.attr('alt');
    
    $.fancybox.open([ { href : imgSrc, title : imgDesc } ], { padding : 0 });
});

And here's a demo.