Image Swap onClick

Image Swap onClick

I have a bunch of thumbnails and a main image to the right of those thumbnails. What I'm trying to do is have the thumbnail appear (an enlarged version obviosly) as the main image on click. It's not working for some reason. Can anyone help? I'll leave my code. It's not that much. Keep in mind I'm using an animated opacity script - you can ignore that. The script I'm having trouble with is right below that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK href="grey.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
                                                                 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
       
<script type="text/javascript">                                         
   // opacity script
   
   $(document).ready(function() {

   $("ul.gallery li").hover(function() { //On hover...

      var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

      //Set a background image(thumbOver) on the <a> tag - Set position to bottom
      $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

      //Animate the image to 0 opacity (fade it out)
      $(this).find("span").stop().animate({opacity: 0}, 300);

      } , function() { //on hover out...

      //Animate the image back to 100% opacity (fade it back in)
      $(this).find("span").stop().animate({opacity: 1}, 300);

      });

      });
   
</script>

  <script type="text/javascript"> 

//Swap Image on Click
   $("ul.gallery li a").click(function() {
      
      var mainImage = $(this).attr("href"); //Find Image Name
      $("#main_view img").attr({ src: mainImage });
      return false;      
   });

</script>
                                                             
</head>                                                                 
<body>                                                                 
   <!-- we will add our HTML content here -->
   
   <div id="gallery-box">
   <ul class="gallery">
   <li>
      <a href="main_image.jpg" class="thumb"><span><img src="thumbnail.png" alt="" /></span></a>
      <h2><a href="#">Metal Art</a></h2>
   </li>
    <li>
      <a href="main_image1.jpg" class="thumb"><span><img src="thumbnail1.png" alt="" /></span></a>
      <h2><a href="#">Metal Art</a></h2>
   </li>
</ul>   
</div>

<div id="main_view">
   <a href="http://www.testing.com" title="Testing" target="_blank"><img src="untitled-2.jpg" alt="" /></a><br />
   <small style="float: right; color: #999;">Tutorial by <a style="color: #777;" href="http://www.SohTanaka.com">Soh Tanaka</a></small>
</div>
                                   
</body>                                                                 
</html>