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.

I haven't been able to locate a serious problem either, but I did notice a few inconsistencies between your output and the demo. First, you have single quotes around the background:url, and you don't have a semi-colon after the 50%. Also your <div class="clear"> is in a different location. I also noticed the demo is using jQuery 1.3.2 and you are using 1.6.2. If I had to guess, I would start with using the same jQuery version. — AdmSteck
– AdmSteck, Commented Jul 26, 2011 at 19:51
I thought about that. Aren't they supposed to be backwards compatible though? — Xaisoft
– Xaisoft, Commented Jul 26, 2011 at 19:54
As far as single quotes for the background:url. That is how I normally see it, does it make difference if it is single or double. — Xaisoft
– Xaisoft, Commented Jul 26, 2011 at 19:55
While I'm sure the jQuery team does strive for backwards compatability, there have been many changes, some rather major, between 1.3 and 1.6. It's hard to tell if something they changed could have broke the lightbox plugin you are using. Looking at the download for the actual plugin, it includes an even earlier version of jQuery, 1.2.3. I still say trying your test with one of these earlier versions would be a quick and fairly easy thing to try before attempting to debug the plugin. — AdmSteck
– AdmSteck, Commented Jul 27, 2011 at 12:04

Coeffect · Accepted Answer · 2011-07-26 19:45:28Z

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.

answered Jul 26, 2011 at 19:45

Coeffect

8,8722 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xaisoft Over a year ago

I think you are on to something. I am just using the lightbox plugin found here: leandrovieira.com/projects/jquery/lightbox. Do you think it is a bug with the lightbox script.

Coeffect Over a year ago

Unfortunately, I've next to no experience with jQuery.. I just checked out the question because of the C# tag. I'll take a look at the site and see if anything stands out, but don't hold your breath..

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related