Gallery with sub thumbnail views

Gallery with sub thumbnail views

I am currently trying to create a thumbnail gallery that when you select a thumbnail, it loads associated thumbnails specific to that image for alternate views. I have the base of the thumbnail gallery created (click thumbnail + view larger image). I am however having issues getting it to load the associated sub images. I have the default one working for when the page is initially loaded, but it is not properly swapping out the urls for the new images, so it always uses the same three sub images.

You can see the gallery here: http://www.ncharshaf.com/portfolio

Here is the jquery code I am using:

<script type="text/javascript" src="js/jquery.js"></script>

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

   $("h2").append('<em></em>')
   $(".thumbs ul li").click(function(){

      var largePath = $(this).find('a').attr("href");
      var largeAlt = $(this).find('a').attr("title");
      var imgDesc = $(this).find('.descript').html();    //Get HTML of block

               
         $(".mainImgDescript .descript").html(imgDesc);
         $("#largeImg").attr({ src: largePath, alt: largeAlt });
      
         $("h2 em").html(" (" + largeAlt + ")"); return false;

   });
   
   $(".altImages ul li").click(function(){
      var altPath = $(this).find('a').attr("href");
      var largeAlt = $(this).find('a').attr("title");
      var imgLink = $(this).find('.link img').attr("src");    //Get HTML of block

               
         $("#largeImg").attr({ src: imgLink, alt: largeAlt });
      
   });
      
});
</script>


The associated HTML for the main large image:

<div class="main_image">
               <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/img1_large.jpg" id="largeImg" alt="Large image"/>
            </div>
            <div class="altImages">
               <ul>
                  <li>
                     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt1.jpg" id="altImg1" alt="alt1"/>
                     <div class="link">
                        <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_a.jpg">
                     </div>

                  </li>
                  <li>
                     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt2.jpg" id="altImg2" alt="alt2"/>
                        <div class="link">
                           <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_b.jpg">
                        </div>
                  </li>
                  <li>
                     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt3.jpg" id="altImg3" alt="alt3"/>
                        <div class="link">
                           <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_c.jpg">
                        </div>
                  <li>
               <ul>
            </div>


The associated code for the thumbnails (this is where all the sub images are defined:

<li>      
                        <a href="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1.jpg" title="Image 1">
                           <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_thumb.jpg" />
                        </a>
               

                        <div class="descript">
                           <p>TESTING1</p>
                        </div>
                        <div class="altImages">
                           <ul>
                              <li>
                                 <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt1.jpg" id="altImg1" alt="alt1"/>
                                 <div class="link">
                                    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_a.jpg">
                                 </div>
               
                              </li>
                              <li>
                                 <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt2.jpg" id="altImg2" alt="alt2"/>
                                    <div class="link">
                                       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_b.jpg">
                                    </div>
                              </li>
                              <li>
                                 <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/alt3.jpg" id="altImg3" alt="alt3"/>
                                    <div class="link">
                                       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/p1_c.jpg">
                                    </div>
                              <li>
                           <ul>
                        </div>

                     </li>


I very new to jquery, and I know there are probably tons better ways to do this, but at this point I am on a tight deadline, and if I can not get this working it is just going to have to be removed. Hopefully I can get some aid on how to get this solution to work, I feel like its close, or at least I hope so.

Thank you!