Friday, June 11, 2010

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

1 comment:

digital certificate said...

As I am a newbie to asp so I was wondering how to achieve this effect.But your blog helped me implement this easily Thanks for sharing such an informative blog.Its always easy to follow step by step instructions

Site Meter