Thumbnails and Popups in New Windows
One of the most frequent questions I’m asked is how to automagically generate a list/table of images and, when one of those images is clicked, display it in a new window at full size. So, here we go.
To begin, you’re going to need two files: your image gallery and your image pop-up window. Also, this considers you have a directory full of images, ~/images in this case. Remember, the Images path can be called from a database record or even your web.config AppSettings. For simplicity, we’ll just plug the path in. 🙂
On the .aspx page, place a PlaceHolder control. For this example, we’ll name it imageHolder.
Now, let’s go to the code behind. I recommend building a method to build your images. This allows you to place the command anywhere you like (Page_Load or a button event, for example) and makes maintenance a bit simplier than pulling bits of code from here and there. Our method will be named BuildImages.
You’ll need four assemblies for this: System, System.IO, System.Web.UI, and System.Web.UI.WebControls.
Next, let’s create our method.
protected void BuildImages()
// Create an array of the files in the specified directory.
string files = Directory.GetFiles(Server.MapPath(“~/images”), “*.jpg”);
// For each file, generate an imagebutton.
foreach (string filename in files)
FileInfo fi = new FileInfo(filename);
// Create a new image button.
ImageButton ib = new ImageButton();
// The path to the image.
ib.ImageUrl = “~/images/” + fi.Name;
// Width and height of 75. These can be web.config values too!
ib.Width = Unit.Pixel(75);
ib.Height = Unit.Pixel(75);
“window.open(‘Popup.aspx?file=” + fi.Name + “‘,null,’height=600, width=800’);”);
// Add the image to the image placeholder control.
That’s it for the gallery. You could, at this point, fancy it up by creating a table, placing each image in a cell, and apply a bit of formatting, but I’ll leave that to you. 🙂
Now we’re ready to display that full-image popup. We need this page to contain another PlaceHolder control, we’ll name this one popupHolder.
In the code behind, you’ll only need the System, System.Web.UI, and System.Web.UI.Controls this time.
Now, simply on the Page_Load event:
protected void Page_Load(object sender, EventArgs e)
Image img = new Image();
img.ImageUrl = “~/images/” + Request.QueryString[“file”].ToString();
From here, run your application and test it out! Don’t forget to put images in your images directory! You’ll get something that looks like: