How to use magnifier for image and used it in repeater control

<div class="col-md-9 product-price1">
                <div class="col-md-5 single-top">
                     <%--<a href="images/large/image1.jpg" title="Cartoon Bike"><img src="images/large/image1.jpg" width="300px" height="300px" title="Bike"/></a>--%>
               <asp:Image id="image2" ImageUrl='<%#Eval("Image_Path") %>' Width="300px" Height="300px" data-zoom-image='<%#Eval("Image_Path") %>' runat="server" />
                     <%-- <div>
                          
                        <div id="gallery_01">
                            <asp:Repeater ID="r1" runat="server">
                                <itemtemplate>
                            <a href="#" data-image="<%#Eval("Image_Path") %>" data-zoom-image="<%#Eval("Image_Path") %>">
                                <asp:Image ImageUrl='<%#Eval("Image_Path") %>' runat="server" />
                            </a>
                                    </itemtemplate>
                                
                        </div>
                    </div>--%>
                
                     </div>
                  <script type="text/javascript">
                      $(function () {
                          $("#img1").elevateZoom();
                      });
</script></div>