add custom thumbnail to accessible image swapper

[needphphelp1]

I have used the excellent accessible image swaper from the Grow Collective for a while on my website.  I have tried to customized it a bit but without luck.  The code displays a full size image with tumbnails below it that at scaled down versions of the main image. 

 

Once I customized it so clicking on the main image went to an even larger image on a seperate page but it was a bit buggy.

 

I would like to add two things to this great script.

 

1.)  I want to beable to specify seperate files to use as thumbnails rather than scaled down versions of the images.  I assume that I need to put a thumbnail variable in the array and then use it appropriately but I do not know how.

 

2.)  I want to have the main image link to a larger version of itself.  I am in the dark and any help is appreciated. 

 

Thank you in advance.

 

<?
$imagesArray=array();

$imagesArray["src"][0]="1.jpg";
$imagesArray["alt"][0]="First Image";
$imagesArray["src"][1]="2.jpg";
$imagesArray["alt"][1]="Second Image";
$imagesArray["src"][2]="3.jpg";
$imagesArray["alt"][2]="Third Image";
$imagesArray["src"][3]="4.jpg";
$imagesArray["alt"][3]="Fourth Image";
$imagesArray["src"][4]="5.jpg";
$imagesArray["alt"][4]="Fifth Image";

$useImage=0; // set default image value (equal to array index number)

if(isset($_REQUEST)){
while(list($key,$val)=each($_REQUEST)){
  if(strstr($key,"_img_x")){
   $useImage=str_replace("_img_x","",$key);
   break;
  }
}
}

?>
<form method="post" action="<?=$_SERVER["PHP_SELF"]?>" id="imageSwapperForm" onsubmit="return false">
<?
for($i=0; $i < count($imagesArray["src"]); $i++){
echo '<input type="image" name="'.$i.'_img" value="'.$i.'_img" src="'.$imagesArray["src"][$i].'" alt="'.$imagesArray["alt"][$i].'" onclick="document.getElementById('img').src=this.src; document.getElementById('img').alt=this.alt" />';
}
?>
<p><img id="img" src="<?=$imagesArray["src"][$useImage]?>" width="250" height="250" border="0" alt="<?=$imagesArray["alt"][$useImage]?>" /></p>
</form>

[needphphelp1]

The post above has the original code from the Grow Collective.  Here is the slightly modified version that I am using.

 

Once again, thank you in advance.

 

<?
$imagesArray=array();
$imagesArray["src"][0]="1.jpg";
$imagesArray["alt"][0]="";
$imagesArray["src"][1]="2.jpg";
$imagesArray["alt"][1]="";
$imagesArray["src"][2]="3";
$imagesArray["alt"][2]="";

$useImage=0; // set default image value (equal to array index number)

if(isset($_REQUEST)){
while(list($key,$val)=each($_REQUEST)){
if(strstr($key,"_img_x")){
$useImage=str_replace("_img_x","",$key);
break;}}}?>
<form method="post" action="<?=$_SERVER["PHP_SELF"]?>" id="imageSwapperForm" onSubmit="return false">
<p><img class="center" id="img" src="<?=$imagesArray["src"][$useImage]?>" width="500" height="375" alt="<?=$imagesArray["alt"][$useImage]?>" /></p>
<?
for($i=0; $i < count($imagesArray["src"]); $i++){
echo '<input type="image" name="'.$i.'_img" value="'.$i.'_img" src="'.$imagesArray["src"][$i].'" alt="'.$imagesArray["alt"][$i].'" style="width:81px;height:61px;padding:1px" onclick="document.getElementById(\'img\').src=this.src; document.getElementById(\'img\').alt=this.alt" />';
}
?>

</form>