Dynamic thumbnails

Hello, this is bit of an extension to my last questions as it is for the same website.
I am trying to create a photography portfolio on my website.
I have coded in C# so that the full size images are dynamically loaded using the following on the Page_Load method.

        string html = "";
        char indx = 'a';
        html = "<ul>";

        foreach (FileInfo fi in new DirectoryInfo(Server.MapPath("Images/portrait")).GetFiles())
        {
            if (fi.Extension == ".jpg")
            {
                System.Web.UI.WebControls.Image i1 = new System.Web.UI.WebControls.Image();
                i1.Width = 100;
                i1.Height = 100;

                html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <img src=\"Images/portrait/" + fi.Name +
                    "\" alt=\"APIC\"/> </span> </a> </li>";

                indx++;

            }
        }
        html += "</ul>";
        imged.Text = html;

Where imged is a literal -    <asp:literal runat="server" id="imged" />

But for the thumbnail I am using CSS so I can hover over a thumbnail and the image is displayed.
see following

#imageContainer a.gallery, #imageContainer a.gallery:visited
{
      display:block;
      color:#000;
      text-decoration:none;
      border:1px solid #000;
      margin:1px 2px 1px 2px;
      text-align:left;
      cursor:default;
}
#imageContainer a.slidea
{
      background:url(image/thumbsmall.jpg);
      background-repeat:no-repeat;      
      height:80px;
      width:80px;      
}

#imageContainer a.gallery:hover
{
      border:1px solid #FCE58B;
}

As you can see in the code about, I have to hard code in the thumbnail image, which also means a.slidea bit is also hard coded so the next image would be a.slideb.  This makes it a bit of a pain to add new images as I always have to change the code.

Can anyone help me optimise this code so I can use the hover function but dynamically specify the thumbnails too??

Thank you

protected void Page_Load(object sender, EventArgs e)
    {
        string html = "";
        char indx = 'a';
        html = "<ul>";
 
        foreach (FileInfo fi in new DirectoryInfo(Server.MapPath("Images/event")).GetFiles())
        {
            if (fi.Extension == ".jpg")
            {
                System.Web.UI.WebControls.Image i1 = new System.Web.UI.WebControls.Image();
                i1.Width = 100;
                i1.Height = 100;
 
                html += "<li> <a class=\"gallery slide" + indx + "\" href=\"#nogo\"> <span> <img src=\"Images/event/" + fi.Name + 
                    "\" alt=\"APIC\"/> </span> </a> </li>";
 
                indx++;
 
            }
        }
        html += "</ul>"; 
        imged.Text = html;
 
    }
 
   <asp:literal runat="server" id="imged" />
 
 
#imageContainer a.gallery, #imageContainer a.gallery:visited
{
	display:block;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	margin:1px 2px 1px 2px;
	text-align:left;
	cursor:default;
}
#imageContainer a.slidea
{
	background:url(image/thumbsmall.jpg);
	background-repeat:no-repeat;	
	height:80px;
	width:80px;	
}
 
#imageContainer a.slideb
{
	background:url(image/prem2.jpg);
	background-repeat:no-repeat;
	height:80px;
	width:80px;	
}

Select allOpen in new window