Jquery Zoom (Jqzoom)

Jquery Zoom (Jqzoom)

Hi everybody.

I have a problem with Jqzoom.
Consider this situation, I have a <div> element on my site where my image is shown, and under this I have another <div> element where two buttons are placed.
These buttons have the purpose to switch the image from one to another (so, if button1 is clicked image1 should be visible. If button2 is clicked image2 should be visible...).

But the problem is and this is what I don't understand, when I switch to the other image the new visible image is no more zoomable.
How can I fix it so that even the second image can be zoomed?

Can somebody assist me with this problem?

And here is my html Code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">

<script type="text/javascript">

$(document).ready(function(){
   var options = {
        zoomWidth: 300,      
        zoomHeight: 300,
        xOffset: 20,
        yOffset: 0,
        title: false,
        zoomType:'reverse',
        showEffect:'fadein',
        hideEffect:'fadeout',
        fadeoutSpeed: 'slow',
        fadeinSpeed: 'slow',
        position: "right" //and MORE OPTIONS
   };
      
   $('.MYCLASS').jqzoom(options);

});


$(document).ready(function() {
   
   $("#bikeBlue").click(function () {
      $("#pic").html('<a href="kawasakiblue.jpg" class="MYCLASS" title="kawasaki">');
      $("#pic").append('<img src="kawasakiblue_small.jpg"/>');
      $("#pic").append('</a>');      
    });
   
   $("#bikeGreen").click(function () {
      $("#pic").html('<a href="kawasakigreen.jpg" class="MYCLASS" title="kawasaki">');
      $("#pic").append('<img src="kawasakigreen_small.jpg"/>');
      $("#pic").append('</a>');
   });
   
});

</script>

</head>

<body>

<div id="pic">
    <a href="kawasakigreen.jpg" class="MYCLASS" title="kawasaki">   
        <img src="kawasakigreen_small.jpg"/>
    </a>
</div>

<br />
<br />
<br />

<div id="buttons">
    <img id="bikeGreen" src="btn.jpg"/>
    <img id="bikeBlue" src="btn.jpg"/>
</div>

</body>

</html>