[puddlejumper]

So I'm not sure exactly how to word the statement I want, was hoping someone has done this that might be able to help me rewrite my code to do what I need it to do.
What I need it to do is take all the images from the database that are associated with a product id.
Separate them into thumbnail images and full images which are assigned an image type id. The thumbnails need to display in a li tag so when the user clicks them the main image swaps to the matching color.

This is what I'm trying to do. See this site -> Sample site

Here is what I have. I know it is a rough layout of I need it to do but here is what I have for the loop.

<?php

$product = CWgetProduct($_ENV["request.cwpage"]["productID"],'complex');


$i = 1;
$productImg = "productImgMain" + $i;
$productImgLocation = CWgetProduct($_ENV["request.cwpage"]["product_image_imagetype_id"];

while (($row=mysql_fetch_assoc($r1))||($row=mysql_fetch_assoc($r2))){
	//assign image and location
	if (!isset($product["$productImg"])) $product["$productImg"] = array();
	$product["$productImg"] = CWgetImage($_ENV["request.cwpage"]["productID"],$productImgLocation,$_ENV["application.cw"]["appImageDefault"]);
	
	//added to slideshow this will need to identify the large image?
	    <div id="slideshow" class="pics">
    
			<img src="<?php echo $product["$productImg"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>" />
		</div>
		
	//add swatch this will need to identify the swatch?
		       <div id="square_swatch">
   		 <p style="margin:20px"><a id="direct" href="#" style="clear:both">Return to main image.</a></p>
       		<ul id="nav">
            	
    while (($row=mysql_fetch_assoc($r1))||($row=mysql_fetch_assoc($r2))){
                <li><a href="#"><img src="<?php echo $product["productImgMain.1"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>"></a></li>
	}
	</ul>
              
   	 </div>
	$i = $i++;
}
?> 

I have this working if I hard code it but I need it to pull the images dynamically so that if one product has 3 swatches/images it displays 3 but if an image has 20 I need it to display the 20 swatches/images.

This is the code that works when it is hard coded
Assigning of the location in the database for the swatch and the main image. the numbers after ["productID"], is the actual image type id number. which has the image url saved and will load that when it is called.

// get product image main
if (!isset($product["productImgMain"])) $product["productImgMain"] = array();
$product["productImgMain"] = CWgetImage($_ENV["request.cwpage"]["productID"],2,$_ENV["application.cw"]["appImageDefault"]);
// get product zoom image 
if (!isset($product["productImgZoom"])) $product["productImgZoom"] = array();
$product["productImgZoom"] = CWgetImage($_ENV["request.cwpage"]["productID"],3,$_ENV["application.cw"]["appImageDefault"]);
// make sure file exists for zoom link (avoid broken links) 
if (!file_exists(expandPath($product["productImgZoom"]))) {
	$_ENV["request.cwpage"]["imageZoom"] = 0;
}

$product["productImgMain.1"] = CWgetImage($_ENV["request.cwpage"]["productID"],12,$_ENV["application.cw"]["appImageDefault"]);

// get product image2
$product["productImgMain2"] = CWgetImage($_ENV["request.cwpage"]["productID"],67,$_ENV["application.cw"]["appImageDefault"]);
$product["productImgMain2.1"] = CWgetImage($_ENV["request.cwpage"]["productID"],6,$_ENV["application.cw"]["appImageDefault"]);
 

code for the slideshow (image swap).

<style>

#slideshow img{
	width: 300px;
	height:450px;
}
</style>
    <div id="slideshow" class="pics">
    
    	<img src="<?php echo $product["productImgMain"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>" />

		<img src="<?php echo $product["productImgMain2"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>" />
</div> 

code for the swatches

 <div id="square_swatch">
   		 <p style="margin:20px"><a id="direct" href="#" style="clear:both">Return to main image.</a></p>
       		<ul id="nav">
            	
    
                <li><a href="#"><img src="<?php echo $product["productImgMain.1"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>"></a></li>
                
                <li><a href="#"><img src="<?php echo $product["productImgMain2.1"]; ?>" alt="<?php echo htmlentities($product["product_name"]); ?>" /></a></li>
</ul>
              
   	 </div>