Improvements and bug with this php to asp.net conversion?

Question

I found this tutorial on how to take a directory of images and build a gallery out of it and apply the light-box plug in to it. I do not know php, but I tried to take the code and do an asp.net/c# conversion of the tutorial and I got it working here .

There are is one issue I am facing and I am also curious if there is anything I could have done differently.

The issue I am having is that when you click on an image that is not the first or last image and you use the arrow keys to go forward and back, it is going from image 12 for example to 10 to 8 to 6 and so on or it might go from 2 to 5 to 7. I can't figure out why this is happening.

As far as for the code that generates the gallery, I have one method:

public string CreateGallery()
{
    StringBuilder sb = new StringBuilder();

    string directory = "gallery";
    string[] allowedTypes = new string[] { "jpg", "jpeg", "gif", "png" };

    string[] file_parts = new string[] { };


    string ext = "";
    string title = "";
    int i = 0;

    string[] files = System.IO.Directory.GetFiles(Server.MapPath(directory));


    foreach (var file in files)
    {

        file_parts = Path.GetFileName(file).Split('.');
        ext = file_parts[1];
        title = file_parts[0];

        string nomargin = "";

        if (allowedTypes.Contains(ext))
        {
            if ((i + 1) % 4 == 0) nomargin = "nomargin";

            sb.Append(string.Format("<div class=\"pic {0}\" 
                                    style=\"background:url('{1}') no-repeat 50% 
                                    50%\"><a href=\"{2}\" title=\"{3}\" target=\"_blank
                                       \">{4}</a></div>", 
                                    nomargin, directory + "/" + 
                                    Path.GetFileName(file),
                                    directory + "/" + Path.GetFileName(file), 
                                    Path.GetFileName(file), 
                                    Path.GetFileName(file)));

                i++;

            }

        }

        return sb.ToString();
    }

I am calling <%=CreateGallery() %> in the demo.aspx. I basically copied the code almost verbatim, so is there anything that I am doing that I do not have to do (unecessary). Is calling <%=CreateGallery() %> a good option for this or is there a better way. Other improvements are welcome as well.

Answer 1

I've figured out the problem in more specific terms, but I don't really have a solution for you.

Clicking on any image works at first. The problem begins when you close an image and choose a new one. For every image you've clicked on, the arrow keys will move by 1 picture. So on your first image choice, it will work perfectly; each arrow key hit will move by one picture. When you've closed the first image and clicked a second, the arrow keys will move by 2 pictures. Three images makes the arrow keys move by three pictures.

My guess is that you're creating some kind of event handler for the arrow keys whenever a user clicks on an image, and not removing that event handler when the image is closed. So after clicking three images, you've got three event handlers moving along the picture list on an arrow key click.