Home > .net 2.0 > Thumbnails and Popups in New Windows

Thumbnails and Popups in New Windows

October 30, 2006

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.šŸ™‚

Image Gallery

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);

            // The javascript that creates the pop-up window.
            ib.Attributes.Add(“onclick”,
                “window.open(‘Popup.aspx?file=” + fi.Name + “‘,null,’height=600, width=800’);”);

            // Add the image to the image placeholder control.
            imageHolder.Controls.Add(ib);  

        }
}

Notice the ImageButton (ib)’s Attributes’s property has an Add method?  This allows us to inject some Javascript on-the-fly and, in this case, add an OnClick event to pop up our image box and pass along a QueryString of the filename.

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.šŸ™‚

Popup Window

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();
       popupHolder.Controls.Add(img);
    }

 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:

Categories: .net 2.0
%d bloggers like this: