Why will this jQuery code only work in Firefox?

Question

I have some code that allows you to scroll back and forth between images that are brought to full-size in a lightbox. It just replaces the source of the image when a key is pressed. It works perfectly in Firefox, but doesn't seem to do anything in IE, Chrome, and Safari (the only other browsers I tested).

Any help would be greatly appreciated!

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

function handleArrowKeys(evt) {
  switch (evt.keyCode) {
    case 37:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == 1) {
          thisImage = 1;
          } else {
          thisImage--;
        }

      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);

      break;       
    case 39:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == maxImage) {
          // Do Nothing....
          } else {
          thisImage++;
        }
      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);
      break;  
  }
}

document.onkeypress = handleArrowKeys;

});

Answer 1

It has to do with the different event models that are used between the browsers.

This line:

document.onkeypress = handleArrowKeys;

and the keyCode property are not cross-browser compatible.

Since it appears that you are using jQuery, why not use their keypress event like so:

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

    $("body").keypress(function(evt) {
        switch (evt.which) {
                case 37:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == 1) {
                                        thisImage = 1;
                                        } else {
                                        thisImage--;
                                }

                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);

                        break;       
                case 39:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == maxImage) {
                                        // Do Nothing....
                                        } else {
                                        thisImage++;
                                }
                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);
                        break;  
        }
}
});
});

Answer 2

You can replace your if else block with a regex btw, it'll shorten and simplify your code

var re = new RegExp('images/([0-9]+).jpg');
var m = re.exec($('img.highslide-image').attr('src'));
if (m && m.length > 0) {
    thisImage = m[0];
}