Need help building slideshow

[guttyguppy]

http://stevespets.com/wp/

 

Meet the puppies

 

Those are posts of category meet-the-puppies with custom fields for breed, gender, color, and image

 

Here's my code:

 

<div id="puppyBig">
<div id="puppyBigPic">
<?php 
query_posts('category_name=meet-the-puppies&showposts=1');
while ( have_posts() ) : the_post();
$postid=$post->ID;
$mugshot = get_post_meta($postid, 'mugshot', true);
echo wp_get_attachment_image($mugshot, array('316x316'));
endwhile; ?>
</div><!-- end puppyBigPic -->
<br/>
<div id="puppyBigInfo">
Breed: <span id="petBreed"></span> Gender: <span id="petGender"></span> Color: <span id="petColor"></span>
</div><!-- end puppyBigInfo -->
</div><!-- end puppyBig -->
<div id="puppyThumbs">
<?php 
query_posts('category_name=meet-the-puppies');
while ( have_posts() ) : the_post(); ?>
<?php $postid=$post->ID;
$mugshot = get_post_meta($postid, 'mugshot', true);
?>
<div class="puppyThumb <?php if (get_post_meta($postid, 'gender', true)=='male'){echo 'blue';}?>">
<a href="">
<?php 
$scriptpath = get_bloginfo('template_directory');
$puppyThumb = wp_get_attachment_url($mugshot); 
echo '<img src="'.$scriptpath.'/scripts/timthumb.php?src='.$puppyThumb.'&w=83&h=83&zc=1" alt="" />'; //this method actually crops the image using timthumb
//$puppyThumb = wp_get_attachment_image_src($mugshot); 
//echo wp_get_attachment_image($mugshot, array(83,83));
?>
</a>
<br/>
<span><?php echo get_post_meta($postid, 'breed', true);?></span>
</div><!-- end puppyThumb -->
<?php endwhile; ?>
</div><!-- end puppyThumbs -->

 

I want the thumbs to switch the large image and push the meta values in the right places, preferably on the fly w/ajax/jquery. Anyone who helps me gets 1 hour graphic design services of their choice-logo design, favicon/icon/badge design, etc and I'm the best if I do say so.