Displaying images in a pop when a image is clicked in gridview..

See more:

ASP.NET

hi
i have a grid view with a image column were images are stored..when a image is clicked in grid view a pop need to be displayed without any postback.... i have done it but it causing the page to post back..? Also when ESC key is pressed the pop up need to close...??

here is the snippet... Any help will be appreciated????


in aspx page

<asp:GridView ID="gvCustomer" runat="server" AllowPaging="True" AllowSorting="True"
   CssClass="Gridview" HeaderStyle-BackColor="#61A6F8" DataKeyNames="ImageName" CellPadding="4"
   DataSourceID="ObjectDataSource1" AutoGenerateColumns="False" ForeColor="#333333"
   GridLines="None" EmptyDataText="No data Available">
   <AlternatingRowStyle BackColor="White" />
   <Columns>
     <asp:BoundField DataField="UserName" HeaderText="UserName" />
     <asp:TemplateField HeaderText="Image Name">
       <ItemTemplate>
         <asp:Label ID="LblImageName" runat="server" Text='<%#Eval("ImageName") %>'></asp:Label>
       </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Image">
       <ItemTemplate>
         <asp:ImageButton ID="imgbtn" runat="server" ImageUrl='<%#"~/Images/"+Eval("ImageName")%>'
           OnClick="imgbtn_Click" Style="height: 50px; width: 50px;" />
       </ItemTemplate>
     </asp:TemplateField>
     <asp:BoundField DataField="UploadedBy" HeaderText="UploadedBy" />
     <asp:TemplateField HeaderText="UploadedDate">
       <ItemTemplate>
         <asp:Label ID="Label1" runat="server" Text='<%# Eval("UploadedDate") %>'></asp:Label>
       </ItemTemplate>
     </asp:TemplateField>
   </Columns>
   <EditRowStyle BackColor="#7C6F57" />
   <FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True" />
   <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
   <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
   <RowStyle BackColor="#E3EAEB" />
   <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
   <SortedAscendingCellStyle BackColor="#F8FAFA" />
   <SortedAscendingHeaderStyle BackColor="#246B61" />
   <SortedDescendingCellStyle BackColor="#D4DFE1" />
   <SortedDescendingHeaderStyle BackColor="#15524A" />
 </asp:GridView>
 <br />
 <br />
 <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Showallcustomers"
   TypeName="Customer"></asp:ObjectDataSource>
 <div id="light" class="white_content">
   <table cellpadding="0" cellspacing="0" border="0" style="background-color: #a6c25c;"
     width="100%">
     <tr>
       <td height="16px">
         <a href="java<!-- no -->script:void(0)"  önclick="document.getElementById('light').style.display='none'">
           close</a>
       </td>
     </tr>
     <tr>
       <td style="padding-removed 16px; padding-removed 16px; padding-removed 16px">
         <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff"
           width="100%">
           <tr>
             <td align="center" colspan="2" class="headertext">
               <asp:Label ID="LblDisplayImageName" runat="server"></asp:Label>
             </td>
           </tr>
           <tr>
             <td>
                
             </td>
           </tr>
           <tr>
             <td align="center">
               <asp:Image ID="imglightbox" runat="server" Style="height: 300px;" />
             </td>
           </tr>
           <tr>
             <td height="10px">
             </td>
           </tr>
         </table>
       </td>
     </tr>
   </table>
   <div align="center" class=" headertext">
     <asp:Label ID="txtlbl" runat="server"></asp:Label></div>
 </div>

in aspx.cs

protected void imgbtn_Click(object sender, EventArgs e)
 {
   try
   {
     ImageButton imgbtn = sender as ImageButton;
     GridViewRow gvrow = imgbtn.NamingContainer as GridViewRow;

     Label LblImageName = (Label)gvrow.FindControl("LblImageName");
     LblDisplayImageName.Text = LblImageName.Text;
     //Find Image button in gridview
     ImageButton imgbtntxt = (ImageButton)gvrow.FindControl("imgbtn");
     //Assign imagebutton url to image field in lightbox
     imglightbox.ImageUrl = imgbtn.ImageUrl;
     ScriptManager.RegisterStartupScript(Page, typeof(Page), "ShowValidation", "javascript:ShowImages();", true);
   }
   catch (Exception ex)
   {
     lblmsg.Text = "imgbtn_Click():" + ex.Message;
   }
 }

and the java script is here
-----------------------------------

script type="text/javascript">
    function ShowImages() {
      document.getElementById('light').style.display = 'block';
      return false;
    }
    function doclose(e) // note: takes the event as an arg (IE doesn't)
    {
      if (!e) e = window.event; // fix IE

      if (e.keyCode) // IE
      {
        if (e.keyCode == "27") window.close();
      }
      else if (e.charCode) // Netscape/Firefox/Opera
      {
        if (e.keyCode == "27") window.close();
      }
    }