Matt Berseth has a great example here: http://mattberseth2.com/modal_popup_extender_image_preview/ (code is here: http://mattberseth.com/blog/2007/07/modalpopupextender_example_cre.html)
I've adapted to use in a gridview like this working sample complete with dummy data, try it out as is replacing your images (I'm using 01.jpg):
ASPX:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.thumbnail{
height: 100px;
width: 130px;
cursor: hand;
}
.imgpopup{
height: 576px;
width: 768px;
}
</style>
<script type="text/javascript">
function togglePopupImage(thumbnail){
$get('spnImageText').innerHTML = thumbnail.alt;
$get('imgPopup').src = thumbnail.src;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="Header1" />
<asp:TemplateField HeaderText="Column1">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Column1") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Column3">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Column2") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Column4">
<ItemTemplate>
<img id="img01" runat="server" class="thumbnail" src='<%# "Images/" + Eval("Column3") %>' alt="Big gold ball hovering on water"
onclick="togglePopupImage(this);" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" targetcontrolid="img01" popupcontrolid="pnlPopup"
backgroundcssclass="modalBackground" dropshadow="false" cancelcontrolid="btnCancel" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Panel ID="pnlPopup" runat="server">
<table>
<tr>
<td colspan="2">
<img id="imgPopup" class="imgpopup" runat="server" />
</td>
</tr>
<tr>
<td>
<span id="spnImageText" />
</td>
<td align="right">
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
ASPX.CS:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = InıtialRows();
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
}
protected DataTable InıtialRows()
{
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("Column1", typeof(string)));
dt.Columns.Add(new DataColumn("Column2", typeof(string)));
dt.Columns.Add(new DataColumn("Column3", typeof(string)));
dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Column1"] = string.Empty;
dr["Column2"] = string.Empty;
dr["Column3"] = "01.jpg";
dt.Rows.Add(dr);
return dt;
}
the modalpopup really serves its purpose here ...