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 and downloadable code is available in Add image in the gridview and zoom it on click
