用javascript制作一个网格视图图像

我有一个gridview，里面有一个image列。它可以正常工作，但我需要更多。我想让点击的图像更大，并使屏幕聚焦在它上。事实上，我现在所做的是当图像不在网格视图中时，但就像我说的那样，我需要在我的网格视图中显示图像。这是我的css（我也想写我的css，因为它可以聚焦）：

#overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #000;
        opacity: 0.7;
        filter: alpha(opacity = 70) !important;
        display: none;
        z-index: 100;
    }
    #overlayContent {
        position: fixed;
        width: 100%;
        top: 100px;
        text-align: center;
        display: none;
        overflow: hidden;
        z-index: 100;
    }
    #contentGallery {
        margin: 0px auto;
    }
    #imgBig, #imgSmall {
        cursor: pointer;
    }

我的网格视图：

<asp:GridView ID="GridViewEvents" CssClass="mGrid" AutoGenerateColumns="false" runat="server" DataSourceID="EntityDataSourceEvents">
    <Columns>
        <asp:TemplateField HeaderText="Araç">
            <ItemTemplate>
                <%#GetPlate(Convert.ToInt16(Eval("CarId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sürücü">
            <ItemTemplate>
                <%#GetDriverId(Convert.ToInt16(Eval("DriverId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Alış KM">
            <ItemTemplate>
                <div id="overlayContent">
                    <img id="imgBig" src="" alt="" />
                </div>
                <div id="grid">
                    <img id="imgSmall" onclick="Tiklandi()" alt="" src='<%#Eval("FirstKmImage") %>' />
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İade KM">
            <ItemTemplate>
                <asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Alış Tarih">
            <ItemTemplate>
                <%#Eval("FirstDate") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İade Tarih">
            <ItemTemplate>
                <%#Eval("LastDate") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Güzergah">
            <ItemTemplate>
                <%#Eval("Guzergah") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="İş Durumu">
            <ItemTemplate>
                <%#IsDurumu(Convert.ToBoolean(Eval("Done")))%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我的js代码：

function Tiklandi() {
        $("#imgBig").attr("src", $(this).prop('src'));
        $("#overlay").show('slow');
        $("#overlayContent").show('slow');
    }

我如何制作js代码来在网格视图中进行这种过程？