Add image in the gridview and zoom it on click

Here is a sample to show image in the gridview and zoom it on mouse click. The filename of the image and imageurl is placed in the xml file. Step 1: Create an Image.xml with FileName and ImageURL attribute. This XML will be datasource to gridview. <?xml version="1.0" encoding="utf-8" ?> <Images>             <Image FileName="Suzuki-Swift.jpg" ImageURL="images/Suzuki-Swift.jpg"></Image>             <Image FileName="Aston_Martin-V12_Vantage_2010.jpg" ImageURL="images/Aston_Martin-V12_Vantage_2010.jpg"></Image>             <Image FileName="Honda-CR-Z_2011.jpg" ImageURL="images/Honda-CR-Z_2011.jpg"></Image>             <Image FileName="Hummer-H3_Alpha_2008.jpg" ImageURL="images/Hummer-H3_Alpha_2008.jpg"></Image>             <Image FileName="Mercedes-Benz-SL63_AMG_2009.jpg" ImageURL="images/Mercedes-Benz-SL63_AMG_2009.jpg"></Image >             <Image FileName="Seat-Altea_TDI_2005.jpg" ImageURL="images/Seat-Altea_TDI_2005.jpg"></Image> </Images> Step 2: Place a gridview in the aspx page with a BoundField and TemplateField. <asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvImage_RowDataBound">             <Columns>                         <asp:BoundField HeaderText="FileName" DataField="FileName"></asp:BoundField>                         <asp:TemplateField HeaderText="Image">                                     <ItemTemplate>                                                 <div>                                                             <asp:Image ID="Image1" Height="80" Width="80" ToolTip="Click to enlarge" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />                                                 </div>                                                 <div id="divImg" runat="server" style ="float: left;">                                                 </div>                                     </ItemTemplate>                         </asp:TemplateField>             </Columns>             <HeaderStyle HorizontalAlign="Left" Height="0px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />             <AlternatingRowStyle BackColor="#eeeeee" /></asp:GridView> Step 3: Create GetImageData() method to load XML data to GridView. private void GetImageData() {             string xmlImageFilePath = Server.MapPath(@"Image.xml");             if (File.Exists(xmlImageFilePath))             {                         using (DataSet ds = new DataSet())                         {                                     ds.ReadXml(xmlImageFilePath);                                     gvImage.DataSource = ds;                                     gvImage.DataBind();                         }             } } Step 4: gvImage_RowDataBound will add onclick javascript event on each image in a cell, on click of image EnlargeImage javascript will be invoked protected void gvImage_RowDataBound(object sender, GridViewRowEventArgs e) {             if (e.Row.RowType == DataControlRowType.DataRow)             {                         HtmlGenericControl divImg = (HtmlGenericControl)e.Row.Cells[1].FindControl("divImg");                         Image img = (Image)e.Row.Cells[1].FindControl("Image1");                         img.Attributes.Add("onclick", "return ElargeImage('" + divImg.ClientID + "','" + img.ImageUrl + "');");          } } Step 5: Add EnlargeImage and CloseImage javascript method in the aspx page. EnlargeImage will enlarge the image in the same cell and CloseImage will close enlarged image. <script language="javascript" type="text/javascript">             function EnlargeImage(divid, src) {                         eDiv = document.getElementById(divid);                         eDiv.innerHTML = "<table><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr><tr><td><img src=\"" + src + "\"/ height="500" width="750"></td></tr><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr></table>";             }             function CloseImage(divid) {                         eDiv = document.getElementById(divid);                         eDiv.innerHTML = ';             } </script> Live Demo

Like us if you find this post useful.

Thanks!

Shibashish mohanty

Download Code