Hyperlink to make image larger.

[pmnjason]

Hey guys,

This has me stumped.

What I'm trying to do here is make the image displayed after the javascript be clickable so it can open the image in a new window.

here's my code:

<script language="javascript" type="text/javascript">
function bigpix(i) {
	document.getElementById('bigpicture').src=i;
	return;
	}
</script>


<table width="800" border="1" cellspacing="5">
<tr>
<td width="150" valign="top">
<?php 
$hdrswtch=false;
for($i=1;$i<=4;$i++) {
	$imglg=$row_rs['image'.$i];
	if ($imglg=='') break; 
	if(($x=@getimagesize(substr($imglg,1)))===false) break;
	if($hdrswtch==false){
		echo '<p class="bartopbottom" style="text-align:center">Photos</p>';
		$hdrswtch=true;
		}
	$j=$x[0]/145;
	$k=$x[0]/500;
	 ?>	<p><img onmouseover='javascript:bigpix("http://www.website.com/<?=$imglg?>")' width="<?php echo $x[0]/$j; 

?>" height="<?php echo $x[1]/$j; ?>" src="<?php echo '..'.$imglg ?>" />
</p>
	<?php } ?>
</td><td>
<table width="100%">
<tr><td class="bartopbottom"><?=$row_rs['name']?></td></tr>
<tr><td align="left" style="padding-left:10px;"><?=stripslashes($row_rs['descr'])?></td></tr>
<tr><td class="bartopbottom">Additional Details</td></tr>
<tr><td>
<table>
<tr><td width="100">Seller Name:</td><td><?=$row_rs['sellerName']?></td></tr>
<tr><td>Seller Phone:</td><td><?=$row_rs['sellerPhone']?></td></tr>
<?php if($row_rs['custMisc1']!='' || $row_rs['custMisc2']!='') { ?>
<tr><td>Additional Information:</td><td>&nbsp;</td></tr>
<tr><td colspan="2" style="text-align:left;padding-left:10px;"><?=$row_rs['custMisc1']?></td></tr>
<tr><td colspan="2" style="text-align:left;padding-left:10px;"><?=$row_rs['custMisc2']?></td></tr>
<?php } ?>
</table>
</td></tr>
<tr><td align="center"><img border="0" src="http://www.website.com/<? echo $row_rs['image'.$row_rs['main_image_id']]; ?>" 

id="bigpicture"  width="<?php echo $x[0]/$k; ?>" height="<?php echo $x[1]/$k; ?>" /></td></tr>
</table>
</td>
</tr>

</table>

I've tried

<a href="<? echo $imglg ?>">

around the picture with id 'bigpicture' but it will only open one image.

Any help would be GREATLY APPRECIATED!

Thanks.

[cretaceous]

the id needs to be different for each picture - yours will all have an id of bigpicture

so you can use the row id to dynamically update the ids - but then your js will be thrown out

I recommend a prebuilt solution
if you want clean and simple : google highslide

or try jquery plus plug in or a zillion others

if you are a fan of drawing up greyed out backgrounds (personally I hate them) you'll want it modal - I think they go by name of lightbox style scripts
(in fact most js solutions are modal but not all grey out the rest of the page)