Hi,
You can even use GridView Control to achieve the same as it has lot of features.
First, Place the GridView in your main page as follows:
(Replace <Put-Your-DataSet-ImageURL-FieldName> by your actual field name)
<body>
<form id="frmGallery" runat="server">
<table id="Table6" align="center" cellpadding="0" cellspacing="0" style="border: 0px Solid Gray;
width: 100%; font-family: tahoma; font-size: 10pt; background-color: white;">
<tr>
<td style="width: 100%; height: 200px;" align="left" valign="top">
<asp:GridView ID="gvImageGallery" runat="server"
PageSize="50" AutoGenerateColumns="false" Width="100%"
onrowcommand="gvImageGallery_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Image">
<ItemStyle Width="100%" />
<ItemTemplate>
<asp:ImageButton ID="imgBtnShow" runat="server" CommandName="ShowImage" CommandArgument="<%# Container.DataItemIndex %>"
ImageUrl="<Put-Your-DataSet-ImageURL-FieldName>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>
Bind your GridView with your DataSet and add the Event " gvImageGallery_RowCommand "
In this event, first find the selected row-index, then find the ImageButton control and finally get the ImageURL of this Button.
Add ClientScript to open the Popup window to show the Image(You need to create the page before that)
(find sample below)
private void BindGridView()
{
DataSet ds = "your-dataset-retrieval-stuff-here";
gvImageGallery.DataSource = ds;
gvImageGallery.DataBind();
}
protected void gvImageGallery_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "ShowImage")
{
int index = Convert.ToInt32(e.CommandArgument);
ImageButton imgBtn = (ImageButton)gvImageGallery.Rows[index].Cells[0].FindControl("imgBtnShow");
string imageURL = imgBtn.ImageUrl;
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script language="javascript">window.open('Pop.aspx?URL=" + imageURL + "','ShowImage','height=300px,width=600px,scrollbars=1,center=yes');</script>");
}
}
In your pop-up window Create a Image and Set ImageURL from QueryString value(sample mentioned below)
<body>
<form id="frmPopup" runat="server">
<asp:Image ID="imgShow" runat="server" />
</form>
</body>
public partial class Pop : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString["URL"] != null)
{
imgShow.ImageUrl = Request.QueryString["URL"];
}
}
}
}
Finally make the styles of GridView, ImageButton and Popup window height and width as per your requirements