{Giúp với} giúp mình khi click vào ảnh sản phẩm sẽ đưa vào trang nội dung sản phẩm

Mình xài Joomla 1.5.26.
Trang mình hiện tại khi click vào ảnh sản phẩm nó hiện ra ảnh lớn. Mình muốn khi click vào ảnh sản phẩm nó sẽ đưa mình vào trang nội dung của sản phẫm luôn, giống như khi mình click vào tên sản phẩm vậy đó. Các bạn giúp mình với, mình code gà quá......
Mình thấy trong mục components\com_product\views\sanpham\tmpl có file default.php. Code như thế này :

<?php defined('_JEXEC') or die('Restricted access'); ?>

<style>
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:100;display:none; padding:14px 20px;
margin-top:10px; margin-left:-60px;
width:300px; line-height:16px;
}

a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(<?php echo JURI::root()?>templates/thienke-template/images/css-tooltip-gradient-bg.png) repeat-x 0 0;
}

.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

/*CSS3 extras*/
a.tooltip span
{
border-radius: 15px 15px 15px 15px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
</style>

<style>
.lightbox {
z-index:1000;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}

.lightbox_table {
width:100%;
height:100%;
}

.lightbox_table_cell {
vertical-align:middle;
}
</style>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none" onclick="document.getElementById('lightbox').style.display='none';">
<table class="lightbox_table">
<tr>
<td class="lightbox_table_cell" align="center">
<div id="lightbox_content" style="width: 40%; background-color:white; border:5px solid black;">
<!-- insert by script -->
</div>
</td>
</tr>
</table>
</div>

<!-- LIGHTBOX CODE END -->

<?php foreach ($this->arrSanPham as $key => $items):?>
<?php
$link_cat = JRoute::_( 'index.php?option=com_product&controller=sanpham&task=viewCat&cid='. $key );
?>

<div class="module" style="background-image: url('templates/minhquang-template/images/bg-menu-top.png'); background-repeat: repeat-x;">
<div>
<div>
<div>
<h3 style="background: none ; color: #d8af61; font-weight: normal;">
<span style="background-image: url('templates/minhquang-template/images/module_header_emo1.png');
background-position: left;
background-repeat: no-repeat; float: left; width: 200px; padding-left: none;">
<?php echo JText::_('PRODUCT'); ?> <?php echo $this->arrDanhmuc[$key]?>
</span>
<a href="<?php echo $link_cat; ?>" style="text-decoration: none; color: red; position: relative; float: right; padding: 1px 10px 0px 0px;"><?php echo JText::_('MORE_DELTAIL'); ?></a>
</h3>

<div>
<?php
for ($i=0, $n=count( $items ); $i < $n; $i++):
$row =& $items[$i];
$link = JRoute::_( 'index.php?option=com_product&controller=sanpham&task=viewProduct&cid='. $row->id );
?>

<div style="width:206px;float: left;">
<div style="padding: 8px 8px 0px 8px;
background-image: url('templates/minhquang-template/images1/product_footer.jpg');
background-position: center bottom; background-repeat: no-repeat;">
<a onclick="document.getElementById('lightbox_content').innerHTML = fnInsertContent<?php echo $row->id; ?>(); document.getElementById('lightbox').style.display='inline';" class="tooltip">
<img style="width: 190px;height:220px;" alt="<?php echo $row->ten_san_pham; ?>" src="<?php echo $row->hinh_anh; ?>">
<span>
<img class="callout" src="<?php echo JURI::root()?>templates/thienke-template/images/callout_black.gif"/>
<h4 style="color: #EEE;"><?php echo $row->ten_san_pham; ?></h4><hr>
<?php echo $row->mo_ta; ?>
</span>
</a>

<script type="text/javascript">
function fnInsertContent<?php echo $row->id; ?>(){
return '<img style="width: 100%;" alt="<?php echo $row->ten_san_pham; ?>" src="<?php echo $row->hinh_anh; ?>">'
}
</script>
</div>

<div style="padding: 8px 8px 8px 8px; text-align: center;">
<a href="<?php echo $link;?>" style="color: #d8af61;"><?php echo $row->ten_san_pham; ?></a>
</div>
</div>

<?php if($i % 3 == 3):?>
<div style="width: 100%; height: 1px;"></div>
<?php endif;?>

<?php
endfor;
?>
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 10px;"></div>
<?php endforeach;?>

<script type="text/javascript">
var tooltips = document.querySelectorAll('.tooltip span');
window.onmousemove = function (e) {
var CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
CurX = CurX - 70;
CurY = CurY + 24;
var x = CurX + 'px',
y = CurY + 'px';
for (var i = 0; i < tooltips.length; i++) {
tooltips.style.top = y;
tooltips.style.left = x;
}
};
</script>



Không biết có phải edit ở đây không, và edit như thế nào, mọi người giúp mình với nha