Thumbnails asp.net

Question

I am trying to write an application that allows a user to click a button to see images as thumbnails from a folder in a modal popup. Inside of my modal popup I have a datalist. But from there I don't know where to go. I've already tried the 4guysfromrolla solution but it wasn't what I was looking for. How can I set up images as thumbnails? I already have the following....

Dim files As String() = Directory.GetFiles(Server.MapPath("~/Folder1/Folder2/"), "*.jpg")

    For Each File As String In files
        File = File.Substring(File.LastIndexOf("/") + 1, File.Length)
        'Response.Write(File & "<br>")

        File = File & "~/Folder1/Folder2/"

        Dim image As Image = New Image()
        image.ImageUrl = File
        image.Height = 50
        image.Width = 50
        Me.Controls.Add(image)

    Next

Edited:New Question

I want to change the size of the images in javascript onmouseover.

image.Attributes.add("onmouseover","change size here")

Panel2.controls.add(image)

Is it possible to do this here?

Answer 1

<asp:DataList ID="dl_thumbs" runat="server">
<ItemTemplate>
    <img src="<%# Eval("imageUrl") %>" height="50" width="50" title="<%# Eval("imageTitle") %>" alt="<%# Eval("imageAlt") %>"/>
</ItemTemplate>
</asp:DataList>



private void InitData(string folder)
{

    var files = Directory.GetFiles(Server.MapPath(folder));



    var images = files.Select(i =>
                        new
                        {
                            imageUrl = folder + Path.GetFileName(i),
                            imageTitle = Path.GetFileName(i),
                            imageAlt = Path.GetFileName(i)
                        });

    dl_thumbs.DataSource = images;
    dl_thumbs.DataBind();
}

How are the image files save in you folder structure?

Thumbnails are usually processed and optimized versions of an original file.

Original file 500x500, then thumbs would be processed down to 50x50.

You should have 2 ( or more versions of you images.. )

myfavImageName.jpg

myfavImageName.thumb.jpg

or even add another folder [ Thumbs ]

/Folder1/Folder2/myfavImageName.jpg

/Folder1/Folder2/thumbs/myfavImageName.jpg

You can also use Path to get file name. its less error prone:

filename =  Path.GetFileName(File);

Answer 2

This is what I did.

Dim files As String() = Directory.GetFiles(Server.MapPath("~/folder1/folder2/"), "*.jpg")
    For Each File As String In files
        Dim substr As String = File.Substring(0, File.LastIndexOf("\"))

        File = File.Replace(substr, "")

        File = "~/Folder1/Folder2" & File
        Dim image As Image = New Image()
        image.ImageUrl = File
        image.Height = 50
        image.Width = 50
        Panel1.Controls.Add(image)
        'Panel1.FindControl("dlpictures").Controls.Add(image)
    Next