JQuery Fancybox - trying to change url of image once clicked

I'm new to the site, and relatively new to ASP.NET (at least commercially).

Bit of a funny problem here. I'm using a few JQuery plug-ins on the same page. What I'm trying to do is to show a thumbnail image preview when hovering over an image, and then switch the image to a different one once clicked, and show this image in a FancyBox - 3 separate images, if you will (let's call them A, B and C). All of this goes inside a slider (yet another JQuery plugin).

I've managed to get the image hover working inside the slider and even the fancy box for the same image; i.e. imgB hovers and imgB is displayed in the fancy box. The problem is that i can't make the switch to imgC when clicking and displaying the FancyBox. The problem is that both the image preview code and the FancyBox require an <'a'> tag, which obviously can't be nested inside each other. My Javascript code is as follows:

<script type="text/javascript">
    $(document).ready(function() {           

        $("a#imgB").fancybox();

    });
</script>

My html image code is as follows:

<a href="image/imgB" class="preview" id="imgB">
    <img src="image/imgA" alt="Image A">
</a>

The above code displays the 'imgB' image as the hover, and displays the same image in the FancyBox once clicked. What I want to do is keep the hover as is, but switch the FancyBox image for another - imgC - once clicked. According to the FancyBox website, you can force the HREF to change by changing the HREF setting. I have tried a few variations, including this:

$("a#imgB").fancybox({
   'href': href.replace('im开发者_运维百科age/imgC.jpg')           
});

But unfortunately this doesn't work. I get the feeling it's something really simple that's staring me in the face, but can't figure it out. I'd be grateful for any help.

Thanks!

---

Fixed it with a simple change to the script:

$("a#imgB").fancybox({
  'href': 'image/imgC.jpg'           
});

Looks like It ried to overcomplicate it. D'oh! :o)

---

Can you modify the hover plugin to take a div container instead? I don't think there should be a reason why you can only do a hover on an a link