c# - zoom image in gridview -
i new asp.net.i have gridview displays data database.one of field contains image.the image shown dynamically image path stored in database. table contains fields car_name car_id car_photo no_of_seats
now want when user clicks on image want pop image in modal.....or image should zoomed that....
<%@ page title="" language="c#" masterpagefile="~/project/masterpage/masterpage.master" autoeventwireup="true" codefile="reserve.aspx.cs" inherits="project_reserve_reserve" %> <%@ register assembly="ajaxcontroltoolkit" namespace="ajaxcontroltoolkit" tagprefix="asp" %> <asp:content id="content1" contentplaceholderid="head" runat="server"> <link href="reserve.css" rel="stylesheet" type="text/css" /> <script src="../../javascript/jquery-1.9.0.js" type="text/javascript"></script> <%-- <script src="myscript.js" type="text/javascript"></script> <script src="f12.js" type="text/javascript"></script>--%> </asp:content> <asp:content id="content2" contentplaceholderid="homepagecontentplaceholder" runat="server"> <asp:scriptmanager id="scriptmanager1" runat="server"> </asp:scriptmanager> <asp:updatepanel id="updatepanel1" runat="server"> <contenttemplate> select start date <asp:textbox id="textbox1" runat="server"></asp:textbox> <asp:calendarextender id="textbox1_calendarextender" runat="server" enabled="true" targetcontrolid="textbox1"> </asp:calendarextender> <asp:requiredfieldvalidator id="requiredfieldvalidator1" runat="server" controltovalidate="textbox1" errormessage="*"></asp:requiredfieldvalidator> <br /> <br /> select end date <asp:textbox id="textbox2" runat="server"></asp:textbox> <asp:calendarextender id="textbox2_calendarextender" runat="server" enabled="true" targetcontrolid="textbox2"> </asp:calendarextender> <asp:requiredfieldvalidator id="requiredfieldvalidator2" runat="server" controltovalidate="textbox2" errormessage="*"></asp:requiredfieldvalidator> <asp:animationextender id="requiredfieldvalidator2_animationextender" runat="server" enabled="true" targetcontrolid="requiredfieldvalidator2"> </asp:animationextender> <br /> <br /> <br /> select model <asp:dropdownlist id="ddlmodel" runat="server" appenddatabounditems="true" autopostback="true" datasourceid="sqldatasource1" datatextfield="model_name" datavaluefield="model_id" onselectedindexchanged="ddlmodel_selectedindexchanged" width="100px"> <asp:listitem value="0">--select--</asp:listitem> </asp:dropdownlist> <asp:requiredfieldvalidator id="requiredfieldvalidator4" runat="server" controltovalidate="ddlmodel" errormessage="select model"></asp:requiredfieldvalidator> <br /> <asp:sqldatasource id="sqldatasource1" runat="server" connectionstring="<%$ connectionstrings:connectionstring %>" selectcommand="select * [model]"></asp:sqldatasource> <br /> <br /> <br /> <asp:gridview id="gvcar" runat="server" allowpaging="true" autogeneratecolumns="false" cellpadding="4" forecolor="#333333" gridlines="none" emptydatatext="no data found!"> <alternatingrowstyle backcolor="white" forecolor="#284775" /> <columns> <asp:templatefield headertext="select"> <itemtemplate> <asp:checkbox id="checkbox1" runat="server" /> </itemtemplate> </asp:templatefield> <asp:boundfield datafield="car_name" headertext="car name" /> <asp:boundfield datafield="no_of_seats" headertext="seats" /> <asp:templatefield headertext="photo"> <itemtemplate> <asp:image width="300" height="200" id="image1" runat="server" imageurl='<%# eval("car_photo") %>' /> </itemtemplate> </asp:templatefield> </columns> <emptydatatemplate> <div> <h3> <em>sorry...no car available rightnow model</em></h3> </div> </emptydatatemplate> <editrowstyle backcolor="#999999" /> <footerstyle backcolor="#5d7b9d" font-bold="true" forecolor="white" /> <headerstyle backcolor="#5d7b9d" font-bold="true" forecolor="white" /> <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> <asp:button runat="server" id="btnmodalpopup" style="display: none" /> <br /> <br /> <br /> <asp:button id="btnbook" runat="server" text="book" /> <asp:button id="btncancel" runat="server" text="cancel" /> <br /> <br /> </contenttemplate> </asp:updatepanel> </asp:content>
following links might helpful you:
http://technico.qnownow.com/zoom-image-on-mouse-over-in-asp-net-gridview-control/
and
http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html
hope helpful.
Comments
Post a Comment