Thursday, December 22

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                                             

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty