The easiest way to achieve what you have requested would be to use a simple JavaScript function to alter the source of the main image when clicking on the thumbnails i.e.
<script language="JavaScript">
function loadImage( imgSrc )
{
var obj = document.getElementById('mainPicture');
if ( !obj )
{
alert("Unable to locate the main picture block");
return false;
}
obj.src = "/users/images/" + imgSrc;
return true;
}
</script>
From here you would need to then add onClick events to the image thumbnails i.e.
echo "<img src=/users/images/".$info['photo'] ." align='middle' height='65' width='50px' onClick='loadImage(\"".$info['photo']."\")'/>";
echo "<img src=/users/images/".$info['photo2'] ." align='middle' height='65' width='50px' onClick='loadImage(\"".$info['photo2']."\")'/>";
echo "<img src=/users/images/".$info['photo3'] ." align='middle' height='65' width='50px' onClick='loadImage(\"".$info['photo3']."\")'/>";
<br clear='all'>
echo "<img src=/users/images/".$info['photo'] ." align='middle' height='65' width='50px' onClick='loadImage(\"".$info['photo']."\")' id='mainPicture'/>";
So everytime you click on an thumbnail image it will call the loadImage function. This hunts down the element with an id of 'mainPicture'. Once it has been located it will then replace the source of the image with the one that has been selected.
This is a real quick and dirty way to do your thumbnail selection. Please note however that if you are loading images that are huge and then using the img attributes to resize to thumbnails it could cause huge delays for little benefit.
An alternate way would be to use php to create thumbnails of images on the fly or just upload two of each picture... one thumbnail and one full size. All you would need to do then is prefix the thumbnails with a common piece of text i.e. thb_xxxxx.jpg
Any how hope this helps?
Cheers
Stuff
