How do I customise fancybox while still allowing my site to work without javascript?

Question

I'm attempting to integrate fancybox, but I've run into something which is confusing me.

I want to have a standard gallery, but if javascript is disabled then clicking any image takes you to a page which shows all the images in large.

I've crafted a url like this:

<a href="/pages/all-photos" class="photo_group" image_path="/system/images/1/original/badge.png?1281566507" rel="photos"><img  src="/system/images/1/thumb/badge.png?1281566507"/></a>

Originally the href pointed to the large version of the image, as per the documentation, but when I change it to the above the all-photos page is loaded in the fancybox popup.

I can get it to work by doing the following:

$("a.photo_group").click(function(){
    var href = $(this).attr('image_path');
    $.fancybox({
            'type':             'image',
            'href':             href
        });
    return false;
});

But now when it pops up each image they aren't part of the gallery. Any thoughts on the best way to get this to work?

Edit: And another thing, the titles are now also not showing. I'm definitely doing something very wrong here. I tried doing the following (which is similar to how the documentation suggests integrating with flash):

$("a.photo_group").fancybox({
    'type':             'image',
    'href':             $(this).attr('image_path')
});

But that also doesn't work.

Edit:

So what i've ended up doing is the following:

Before I run fancybox I do the following:

$("a.photo_group").each(function(){
    var image_path = $(this).attr('image_path');
    $(this).attr('href', image_path);
});

This sets everything up the way fancybox likes it and my original links are unaffected if javascript is disabled. I hope there's a better way.