title: zoom image in gridview
body: <p>I am new to asp.net.I have gridview which displays data from database.One of the field contains image.The image which is shown dynamically as only image path is stored in database.
  My table contains  fields
  Car_Name
  Car_Id
  Car_Photo
  No_of_Seats</p>
  
  <p>Now what i want is when user clicks on image i want a pop up image in modal.....or image should be zoomed something like that....</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Project/MasterPage/MasterPage.master"
      AutoEventWireup="true" CodeFile="Reserve.aspx.cs" Inherits="Project_Reserve_Reserve" %&gt;
  
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"&gt;
      &lt;link href="reserve.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="../../javascript/jquery-1.9.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;%-- &lt;script src="myscript.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="f12.js" type="text/javascript"&gt;&lt;/script&gt;--%&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="homepageContentPlaceHolder" runat="Server"&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
      &lt;/asp:ScriptManager&gt;
      &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
          &lt;ContentTemplate&gt;
              Select Start Date&amp;nbsp;&amp;nbsp;
              &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True"
                  TargetControlID="TextBox1"&gt;
              &lt;/asp:CalendarExtender&gt;
              &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                  ErrorMessage="*"&gt;&lt;/asp:RequiredFieldValidator&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              Select End Date&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;asp:TextBox ID="TextBox2" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;asp:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" Enabled="True"
                  TargetControlID="TextBox2"&gt;
              &lt;/asp:CalendarExtender&gt;
              &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
                  ErrorMessage="*"&gt;&lt;/asp:RequiredFieldValidator&gt;
              &lt;asp:AnimationExtender ID="RequiredFieldValidator2_AnimationExtender" runat="server"
                  Enabled="True" TargetControlID="RequiredFieldValidator2"&gt;
              &lt;/asp:AnimationExtender&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              Select Model&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;asp:DropDownList ID="ddlModel" runat="server"
                  AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="SqlDataSource1"
                  DataTextField="Model_Name" DataValueField="Model_Id" OnSelectedIndexChanged="ddlModel_SelectedIndexChanged"
                  Width="100px"&gt;
                  &lt;asp:ListItem Value="0"&gt;--Select--&lt;/asp:ListItem&gt;
              &lt;/asp:DropDownList&gt;
              &amp;nbsp;&lt;asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlModel"
                  ErrorMessage="Select a Model"&gt;&lt;/asp:RequiredFieldValidator&gt;
              &lt;br /&gt;
              &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="&lt;%$ ConnectionStrings:ConnectionString %&gt;"
                  SelectCommand="SELECT * FROM [Model]"&gt;&lt;/asp:SqlDataSource&gt;
              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;asp:GridView ID="gvcar" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                  CellPadding="4" ForeColor="#333333" GridLines="None" EmptyDataText="No data found!"&gt;
                  &lt;AlternatingRowStyle BackColor="White" ForeColor="#284775" /&gt;
                  &lt;Columns&gt;
                      &lt;asp:TemplateField HeaderText="Select"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;asp:CheckBox ID="CheckBox1" runat="server" /&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;asp:BoundField DataField="Car_Name" HeaderText="Car Name" /&gt;
                      &lt;asp:BoundField DataField="No_of_Seats" HeaderText="Seats" /&gt;
                      &lt;asp:TemplateField HeaderText="Photo"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;asp:Image Width="300" Height="200" ID="Image1" runat="server" ImageUrl='&lt;%# Eval("Car_Photo") %&gt;' /&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
  
                  &lt;/Columns&gt;
                  &lt;EmptyDataTemplate&gt;
                      &lt;div&gt;
                          &lt;h3&gt;
                              &lt;em&gt;Sorry...No Car is available rightnow for this model&lt;/em&gt;&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/EmptyDataTemplate&gt;
                  &lt;EditRowStyle BackColor="#999999" /&gt;
                  &lt;FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
                  &lt;HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
                  &lt;PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /&gt;
                  &lt;RowStyle BackColor="#F7F6F3" ForeColor="#333333" /&gt;
                  &lt;SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /&gt;
                  &lt;SortedAscendingCellStyle BackColor="#E9E7E2" /&gt;
                  &lt;SortedAscendingHeaderStyle BackColor="#506C8C" /&gt;
                  &lt;SortedDescendingCellStyle BackColor="#FFFDF8" /&gt;
                  &lt;SortedDescendingHeaderStyle BackColor="#6F8DAE" /&gt;
              &lt;/asp:GridView&gt;
              &lt;asp:Button runat="server" ID="btnModalPopUp" Style="display: none" /&gt;
  
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;asp:Button ID="btnbook" runat="server" Text="Book" /&gt;
              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;asp:Button ID="btnCancel" runat="server" Text="Cancel" /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
          &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
  &lt;/asp:Content&gt;
  </code></pre>