Question

I’m working on an image gallery which allows the possibility to upload an image, which is generated and stored as a thumbnail as well as the original image.

The images in the thumbnail folder is listed and if the user clicks one of the thumbnails the image should be displayed in full scale and the clicked thumbnail should get a border, showing which thumbnail the user clicked.

To accomplish this I’m using a Repeater control as well as image and hyperlink controls. Below you can see my code behind file (the actual storage of the file is happening in a separate class).

It works to select a file and upload it: the file is generated as a thumbnail and the uploaded image is shown in full scale. However, there’s some things I need help with:

1. If one of the thumbnails is clicked a Css Class should be added to that thumbnail (adding a border), and this is something I try to accomplish with the ItemRepeater_ItemCommand. The problem here is that all the thumbnails get this class. How could I choose just the clicked thumbnail?

2. How could I write the code in the hyperlink tag so that the thumbnail that is clicked is shown within the image control with ID=”fullSizeImage” instead of shown at a new page?

From code behind:

    protected void Page_Load(object sender, EventArgs e) {

        var directory = new DirectoryInfo(Gallery.PhysicalApplicationPath + "/Images");    
        var theFiles = directory.GetFiles();

        ImageRepeater.DataSource = theFiles;
        ImageRepeater.DataBind();
    }

    protected void ImageRepeater_ItemCommand(object source, RepeaterCommandEventArgs e) {

       if (e.Item.ItemType == ListItemType.Item) {
            var fi = e.Item.DataItem as FileInfo;
            if (fi != null) {
                var hyperLink = e.Item.FindControl("ImageHyperLink") as HyperLink;
                if (hyperLink != null) {
                    hyperLink.CssClass = "border";
                }
            }
        }
    }

    protected void UploadButton_Click1(object sender, EventArgs e) {
        if (ImageUpload.HasFile) {
            var content = ImageUpload.FileContent;
            var name = ImageUpload.FileName;
            var image = Gallery.SaveImage(content, name);

            fullSizeImage.ImageUrl = "Images/" + image;
        }
    }

From default.aspx:

<asp:Image ID="fullSizeImage" runat="server" />

    <asp:Repeater ID="ImageRepeater" runat="server" DataSourceID="" 
        onitemcommand="ImageRepeater_ItemCommand">
        <ItemTemplate>
            <asp:HyperLink ID="ImageHyperLink" runat="server" NavigateUrl='<%# Eval("Name", "~/Images/{0}") %>' >
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>' CssClass="thumbnail" />
            </asp:HyperLink>
        </ItemTemplate>
    </asp:Repeater>

Thanks in advance!

Answer 1

For your thumbnail requirement, you could use a jQuery click handler for the image that has been selected to toggle the appropriate CSS class to the image; see:
http://api.jquery.com/click/ see also toggleClass

For your display of the full-sized image, I’d suggest a dummy href value (“#”) on the hyperlink control with a javascript routine that returns false; this is desired to stop the event bubbling process which would normally cause the browser to follow the link. To display the fuller-sized image, you can use a HTML/CSS routine as demonstrated here: http://www.wickham43.net/hoverpopups.php