Zooming an images in GataGrid binding

<script type="text/javascript">
 function LoadDiv(url)
 {
    var img = new Image();
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    var imgLoader= document.getElementById("imgLoader");

    imgLoader.style.display = "block";
    img.onload = function() {
        imgFull.src = img.src;
        imgFull.style.display = "block";
        imgLoader.style.display = "none";
    };
    img.src= url;
    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>

<style type="text/css">
     body 
     {
        margin:0;
        padding:0;
        height:100%; 
        overflow-y:auto;  
     }
     .modal
     {
        display: none; 
        position: absolute;
        top: 0px; 
        left: 0px;
        background-color:black;
        z-index:100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity:0.8;
        min-height: 100%;
     }
     #divImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        background-color:White;
        height: 200px;
        width: 200px;
        padding: 3px;
        border: solid 1px black;
     }
     * html #divImage {position:absolute;}
</style>

<div>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
  Font-Names="Arial">
<Columns>
    <asp:BoundField DataField="contentID" HeaderText="ID" />
    <asp:BoundField DataField="Title" HeaderText="Image Name" />
    <asp:TemplateField HeaderText="Preview_50x50">
        <ItemTemplate>
            <asp:ImageButton ID="ImageButton1" runat="server" 
            ImageUrl='<%# Eval("Preview_200x200")%>' 
            Style="cursor: pointer" 
            OnClientClick = "return LoadDiv(this.src);" Width="50" Height="50"
            />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
</div>
        
<div id="divBackground" class="modal">
</div>
<div id="divImage" class = "info">    
    <img id="imgLoader" alt="" src="images/loader.gif" />
    <img id="imgFull" runat="server" alt="" src='<%# Eval("Preview_200x200")%>' style="display: none; height: 200;width:00" />    
<input id="btnClose" type="button" value="close" onclick="HideDiv()"/>           
</div>

Dim com1 As New SqlCommand("SELECT top 4 Title, contentid, category,preview_200x200, preview_50x50,RefNo FROM TableName order by newid()) order by category asc", con)
Dim ada1 As New SqlDataAdapter(com1)
Dim dset1 As New DataSet
ada1.Fill(dset1)
GridView1.DataSource = dset1
GridView1.DataBind()