elevatezoom javascript plugin malfunctioning with updatepanel

I am working on a asp.net application which involves me displaying records from a table and allowing users to select any row an view the image associated with that row, I was told to implement a zoom feature in which users could hover over image and it should get larger. I got everything to work but realized that every time I select a record the page refreshes and the page goes back to the top, I wanted just the gridview to refresh and not the whole page so i inserted a update panel and it worked just fine for the gridview until i realized that the zoom feature was no longer working so I found a workaround that allowed me to use javascript with updatepanel, the only problem is the zoom is malfunctioning. Every time i skip to a new page (gridview paging) it causes the zoom to flash on the top of the page upon mouse movement. This is my aspx code

 <div class="container-fluid">
    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <triggers>
            <asp:AsyncPostBackTrigger ControlID="Gridview1" EventName="PageIndexChanging" />
        </triggers>

        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" CssClass="mydatagrid grid-view" GridLines="None" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnPageIndexChanging="GridView1_PageIndexChanging" AllowPaging="True" OnRowDataBound="GridView1_RowDataBound" ShowFooter="True" >
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerSettings FirstPageText="First Page  &amp;nbsp;" LastPageText="Last Page &amp;nbsp;" Mode="NextPreviousFirstLast" NextPageText="Next Page &amp;nbsp;" PreviousPageText="Previous Page &amp;nbsp;" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>
            <br />
            <br />
            <br />
             <div class="container-fluid">
        <asp:Image ID="Img_Record"  runat="server" style="width: 100%; height: 100%;" />
                  <script>
           $(document).ready(function () {
               $('#Img_Record').elevateZoom({
                   zoomType: "inner",
                   cursor: "crosshair",
                   zoomWindowFadeIn: 500,
                   zoomWindowFadeOut: 750
               });

           });

           var prm = Sys.WebForms.PageRequestManager.getInstance();

           prm.add_endRequest(function () {
               $('#Img_Record').elevateZoom({
                   zoomType: "inner",
                   cursor: "crosshair",
                   zoomWindowFadeIn: 500,
                   zoomWindowFadeOut: 750
               });

           });
        </script>


   </div>
        </ContentTemplate>

    </asp:UpdatePanel>

I would post a screenshot but the images I am working with are sensitive (please bear with me). What i need is some info as to why the zoom plugin would malfunction or something similar to the update panel I can use