how to use lightbox inside <img> tag

Question

Edit: Sorry for not providing full code before this, i will post it now ↓

include 'header.php';

?>

<table width="800px" cellpadding="5" cellspacing="5">
<tr><td style="width:10px"></td>
<td style="background:#F2F2F2; height:400px">

<h3>Club Activity</h3>

    <br>

    <table width="100%" class="tableStyle">
    <tr style="font-weight:bold"><td>NO.</td><td>ACTIVITY</td><td>DESCRIPTION</td><td>DATE TIME</td><td>PICTURE</td></tr>
    <?php               
    $i=0;
    $studentId = (isset($_SESSION['studentId']) ? $_SESSION['studentId'] : null);
    $query="select a.* from student_club sc, club c, activity a where sc.clubId=c.id and a.clubId=c.id and sc.studentId=$studentId";

    $result=mysql_query($query);    
    while ($row = mysql_fetch_array($result)) { 
        $i+=1;
        echo '<tr style="height:25px; vertical-align:top"><td>'.$i.'</td><td>'.$row['activity'].'</td><td>'. $row['description'] .'</td><td>'. $row['dateTime'] .'</td>';
        if($row['picture'] != "")
            echo '<td class="mousehoverpicture"><img src="activity_picture/'. $row['picture'] .'" style="width:50px;height:40px" onclick="location.href=\'activity_picture/'. $row['picture'] .'\'" /></td></tr>';
        else    
            echo '<td></td></tr>';
    }
    if($i==0)
        echo '<tr style="height:25px"><td colspan="5">Record not found</td></tr>';
    ?>
    </table>
    <br>
<?php
    echo mysql_error(); 

?>
</td>
</tr>       
</table>

</div>

</div>
<?php 
include 'footer.php'
?>  $i+=1;

From this code i mainly want to change this part so that onclick will as intend.

if($row['picture'] != "")
            echo '<td class="mousehoverpicture"><img src="activity_picture/'. $row['picture'] .'" style="width:50px;height:40px" onclick="location.href=\'activity_picture/'. $row['picture'] .'\'" /></td></tr>';
        else    
            echo '<td></td></tr>';
    }

So if i hover my mouse on the small thumbnail picture and then click on it, it will just open in new tab with a big picture. All i want is when i click on the picture it should use the lightbox2 effect. I have linked the css/jquery file. here is the image of how my picture looks like before

PS: This is my first post + I dont really understand php that much, need help
from you guys

Answer 1

Download, jquery.fancybox.css & jquery.fancybox.pack.js. And, place it accordingly.

<link href="css/jquery.fancybox.css" rel="stylesheet">
<?
if($row['picture'] != "")
{?>
    <td class="mousehoverpicture">
        <a href="activity_picture/<?echo $row['picture'];?>" class="fancybox-button listThumbs" rel="photos-lib">
            <img src="activity_picture/<?echo $row['picture'];?>" style="width:50px;height:40px"/>
        </a>
    </td>
    </tr>
<?}
else
{?>
        <td></td></tr>
<?}?>

<script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>