Image Gallery using ASP.Net Grid View control

****Start Script*****

[head id="Head1" runat="server"]

    [title]GridView Images Example[/title]

[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]
****End Script***
***Css Start ***
[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: 550px;

        width: 600px;

        padding: 3px;

        border: solid 1px black;

     }

     * html #divImage {position:absolute;}

[/style]
***End Css***
***Start Body ***

[body]
    [form id="form1" runat="server"]
        [div]
            [br /]
[asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  Font-Names="Arial"]
[Columns]
    [asp:TemplateField HeaderText="Preview Image"]
        [ItemTemplate]
            [asp:ImageButton ID="ImageButton1" runat="server"
            ImageUrl='<%# Eval("p_image")%>' Width="50px"
            Height="50px" Style="cursor: pointer"
            OnClientClick = "return LoadDiv(this.src);"/]
        [/ItemTemplate]
    [/asp:TemplateField]
[/Columns]
[/asp:GridView]
        [/div]
        [div id="divBackground" class="modal"]
[/div]
[div id="divImage" class = "info"]
    [table style="height: 100%; width: 100%"]
        [tr]
            [td valign="middle" align="center"]
                [img id="imgLoader" alt=""src="images/loader.gif" /]
                [img id="imgFull" runat="server" 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]

 [/form]
[/body]
[/html]