jQuery array element returning undefined inside click function

Please see update at bottom

I am 99% certain that my issue is scope, but I'm not sure WHY it's causing an issue. My understanding of scope in JS/jQuery is clearly not where it should be.

jsFiddle: http://jsfiddle.net/a3N2L/

Please forgive the semicolons, it's a force of habit carried over from PHP.

I have a dynamically created list of images, and as a learning exercise I'm trying to create a custom lightbox that allows you to scroll through them. (The film strip displaying thumbnails already works)

The links/href's for each are pushed into an array with this code (which seems to work fine):

var imgArray = [];

$('.filmstrip a').each(function() {
    imgArray.push($(this).prop("href"));
})

Then comes the code to create the lightbox, which also works fine.

Inside the lightbox, I am attempting to use a for loop to apply the correct href to each left/right nav button based on the position of the current image within the array. It all seems to work the way I'd expect, until I try to use a click function on the links to fadeIn/Out the new image.

If I just set $('.next a').prop('href', imgArray[i+1]) it applies the correct link address, but obviously just loads the image independently.

The whole chunk that's beating me up is:

if (imgArray.length > 1) {              
        for (var i = 0; i < imgArray.length; ++i) {

            if (i == 0) {

                $('.prev').hide();
                $('.next').show();

    // IF I REFERENCE imgArray[i] HERE, IT WORKS

                $('.next a').click(function(e) {
                    e.preventDefault();

    // INSIDE THE CLICK FUNCTION, imgArray[i] RETURNS UNDEFINED

                    $('#lightbox img').fadeOut('fast');
                    $('#lightbox img').prop('src', imgArray[i+1]);
                    $('#lightbox img').fadeIn('fast');
                });                 

            }               
        }
    }

Yes there are a few else if's and an else following that, but I didn't think I needed to include the extra 50 lines

Suggestions are very happily accepted!

UPDATE

per Chris Hardie's suggestion, I moved the click function outside the loop, and inside the loop used: var pos = imgArray[i]; break; in each condition, then used

 $('.right a').click(function(e) {
e.preventDefault();

  $('#lightbox img').fadeOut('fast');
  $('#lightbox img').prop('src', pos);
  $('#lightbox img').fadeIn('fast');
 });    

after the end of the loop, it seems to work, though I'm having some strange issues with what's in which array position and the associated conditions now, but I think I can figure that part out...

Unless somebody has a better way? I also updated the jsfiddle: http://jsfiddle.net/a3N2L/3/

Another update

Clearly my conditions are all wrong inside the loop, as I need to be comparing i to the current img URL (which is stored in another variable), instead of to a number...DUH

SOLVED

Thanks for the help :)

Final jsfiddle for future readers who may want the example: http://jsfiddle.net/a3N2L/4/