Galeria de Imagens ASP.net 3.5 e C#

[mls]

Estou fazendo uma pequena aplicacão onde o usuário envia as imagens através de um formulario (controle FileUpload) e a imagen é então armazenada numa pasta no servidor e o seu thumbnail tb é criado automaticamente numa outra pasta.

As imagens em thumbails são enviadas para o .aspx através de um repeater e data bind (code behind).

O meu problema é que não estou sabendo como fazer com que clicando no thumbnail a imagem em tamanho grande seja mostrada na mesma página, na div chamada class="imgbox".

Segue o código:

.aspx

<form id="Form" class="gallerian" runat="server">
    <div>
        <h1>Gallerian</h1>
        
        <%--Large images --%>
        <div class="imgbox">
            <asp:PlaceHolder ID="ImagesPlaceHolder" runat="server" Visible="false">

            //***************************GOSTARIA QUE A IMAGEM EM TAMANHO GRANDE APARECESSE AQUI!!!!

            </asp:PlaceHolder>
        </div>
        
        <%--Thumbnails images --%>
        <div class="thumbs">
            <asp:Repeater ID="ThumbsRepeater" runat="server">
                <ItemTemplate>
                    <asp:HyperLink NavigateUrl='<%# Eval("Name", "~/App/images/gallery/{0}") %>' runat="server"> 
                        <asp:ImageButton ID="ImageThumbButton" ImageUrl= '<%# Eval("Name", "~/App/images/thumb/{0}") %>' runat="server" />
                     </asp:HyperLink>
                </ItemTemplate>
            </asp:Repeater>
        </div>
                       
        <%--Choose files and upload button--%>
        <asp:Panel ID="UploadPanel" runat="server" CssClass="fieldsetTxt" GroupingText="Ladda upp bild">
            <asp:FileUpload ID="Uploader" runat="server"  />
            <asp:Button ID="TransferFileButton" runat="server" Text="Överför" onclick="TransferFileButton_Click" />
        </asp:Panel> 
        
        <%--error or success Messages--%>
        <asp:Label ID="messageLabel" runat="server" Visible="false" />
    </div>
    </form>

Code behind file:

public partial class _Default : System.Web.UI.Page 
{
    //index to rename the images.
    int index = 1;

    protected void Page_Load(object sender, EventArgs e)
    {
        DirectoryInfo dir = new DirectoryInfo(Server.MapPath("~/App/images/thumb/"));
        ThumbsRepeater.DataSource = dir.GetFiles();
        ThumbsRepeater.DataBind();
    }

    protected void TransferFileButton_Click(object sender, EventArgs e) //esse método apenas recebe as imagens, salva na pasta indicada e cria os thumbnails
    {
        // Specify the path on the server to
        // save the uploaded file to.
        string savePath = Server.MapPath("~/App/images/gallery/");
        string thumbPath = Server.MapPath("~/App/images/thumb/");

        // Before attempting to save the file, verify
        // that the FileUpload control contains a file.
        if (Uploader.HasFile)
        {
            //Get the name of the file to upload.
            string fileName = Server.HtmlEncode(Uploader.FileName);

            //get the string to check if the files already exists.
            string pathFile = savePath + fileName;
            
            // Get the extension of the uploaded file.
            string extension = System.IO.Path.GetExtension(fileName).ToLower();

            // Allow only files with .png extension
            if ((extension == ".png"))
            {
                //Change the file name if it already exists
                while (File.Exists(pathFile))
                {
                    string fileUploaded = Uploader.FileName;
                    string fileNameWtExt = Path.GetFileNameWithoutExtension(fileUploaded);
                    string newFileName = string.Format("{0}({1}){2}", fileNameWtExt, index, extension);
                   
                    // Append the name of the file to upload to the path.
                    pathFile = savePath + newFileName;
                    index++;
                }

                // Call the SaveAs method to save the 
                // uploaded file to the specified path.
                Uploader.SaveAs(pathFile);

                //After the image is saved, create the Thumbnail and save it in the "thumb" folder
                if(File.Exists(pathFile))
                {
                    System.Drawing.Image image = System.Drawing.Image.FromFile(pathFile);
                    System.Drawing.Image thumbnail = image.GetThumbnailImage(60, 45, null, System.IntPtr.Zero);
                    
                    string thumbName = Path.GetFileNameWithoutExtension(pathFile);
                    string thumbPathFile = thumbPath + thumbName + extension;
                    thumbnail.Save(thumbPathFile);
                }

                // Notify the user that their file was successfully uploaded.
                messageLabel.Text = string.Format("Your file was uploaded successfully. You have just uploaded {0}", fileName);
                messageLabel.CssClass = "success";
                messageLabel.Visible = true;
            }

            else
            {
                // Notify the user why their file was not uploaded.
                messageLabel.Text = "Your file was not uploaded because it does not have a png extension.";
                messageLabel.Visible = true;
                messageLabel.CssClass = "error";
            }
        }
    }
}

Pra quem sabe asp.net 3.5 mostrar a imagem em tamanho grande deve ser mamão com acúcar, mas eu to aqui quebrando a cabeca.

Segundo meu professor, eu deveria usar a PostBackUrl para poder enviar uma "query-string" variável com o nome da foto que eu quero que seja mostrada em tamanho grande. Eu também deveria usar a propriedade commandArgument.

Mas sinceramente, não to conseguindo resolver isso sozinha. Alguma idéia?

Ajudem! Qualquer dica vale!

obrigada.

[quintelab]

Não tem segredo, utilize o evento click da sua imagem, neste evento defina o src da outra imagem.

Abraços...