How to enlarge an image by just clicking the listview row?

Hi everyone!

I'm using asp.net and I need help in modifying my codes in javascript where I used to display and enlarge image after clicking the listview row. I have tried using image button in the listview control and it works using the codes below when you click the image button. But, I want to remove the image button from the listview and I just want to click the IDLabel of the listview control to display and enlarge the image which is located in my "Images" root folder.As of now all
I've got is an enlarge blank image after clicking the row.Please help me modify my codes to display the image. Thanks...Here's my codes below for your reference.

Javascript:

Code:

---

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
   
    <script type="text/javascript" >
   
                var row;
                var id,fname;
             
                function Display(rowval)
                {
                      row = $(rowval).parent().parent();
                        row.addClass("highlightRow");

                        var idLabel = rowval.id;
                        var fnameLabel = rowval.id.replace("IDLabel","FilenameLabel");

                        id = $('#' + idLabel).text();
                        fname = $('#' + fnameLabel).text();
                       
                        var img = new Image();
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
   
    img.onload = function() {
       
        img.src = "~/Images/" + fname;
        imgFull.src = img.src;
        imgFull.style.display = "block";
        };
    img.src= rowval;
   
    var width = document.body.clientWidth;
    if (document.body.clientHeight > document.body.scrollHeight)
    {
        bcgDiv.style.height = document.body.clientHeight + "px";
    }
    else
    {
        bcgDiv.style.height = document.body.scrollHeight + "px" ;
    }
 
    imgDiv.style.left = (width-650)/2 + "px";
    imgDiv.style.top =  "20px";
    bcgDiv.style.width="100%";
 
    bcgDiv.style.display="block";
    imgDiv.style.display="block";
    //return false;
 }
 function HideDiv()
 {
    var bcgDiv = document.getElementById("divBackground");
  var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    if (bcgDiv != null)
    {
        bcgDiv.style.display="none";
        imgDiv.style.display="none";
        imgFull.style.display = "none";
    }
 }
                                                                                   
    </script>

---

Used to display enlarge image:

Code:

---

<div id="divBackground" class="modal">
</div>
<div id="divImage">
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center">
               
                <img id="imgFull" alt="" src=""
                style="display: none;
                height: 500px;width: 590px" />
            </td>
        </tr>
        <tr>
            <td align="center" valign="bottom">
                <input id="btnClose" type="button"  value="close"
                onclick="HideDiv()"/>
            </td>
        </tr>
    </table>
</div>

---

Asp.Net codes from the Listview item template:

Code:

---

<ItemTemplate>
        <tr style="background-color:#DCDCDC;color: #000000;">
            <td>
                <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this);" />
            </td>
            <td>
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
            </td>
            <td>
                <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
            </td>
            <td>
                <asp:Label ID="GenderLabel" runat="server" Text='<%# Eval("Gender") %>' />
            </td>
            <td>
                <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />
            </td>
         
            <td>
                <asp:Label ID="FilenameLabel" runat="server" Text='<%# Eval("Filename") %>' />
            </td>
         
        </tr>
    </ItemTemplate>

---

Additional reference: If I used this asp.net codes <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this.src);" />
I will get this runtime error below

Microsoft JScript runtime error: 'id' is null or not an object.

This should probably be moved to the ASP.NET forum. I think it would probably be easiest to just use one of the existing Lightbox scripts floating around the internet. A quick google search will get you many results. eg. http://fancyapps.com/fancybox/

I would also suggest using the latest jQuery, unless you have a very specific reason for using a version as old as 1.4.3.