My image gallery isn't working (jQuery)

Question

I'm tryimg to make a gallery using jQuery, the keypress() function. The first keypress works (I can go to next pic with Enter), but the second one does nothing. It should jump back to the first pic, sort of resetting the gallery, using Esc. I might be making some big mistake here. :P

Here is my jQuery:

 var belvImg = function() { $(document).keypress(function(event) { if (event.which === 13) { $('.img').hide(); $('.currentimg').show(); var currentImg = $('.currentimg'); var nextImg = currentImg.next(); currentImg.removeClass('currentimg'); nextImg.addClass('currentimg'); } else if (event.which === 27) { $('.img').hide(); var currentImg = $('.currentimg'); currentImg.removeClass('currentimg'); $('#firstimg').addClass('currentimg'); $('#firstimg').show(); } }); }; $(document).ready(belvImg); 

 #imgholder { margin: auto; width: 90%; height: 500px; border: 1px solid black; } #imgholder img { position: absolute; width: 800px; height: 450px; display: none; margin-top: 25px; right: 420px; } .currentimg { position: absolute; display: block; } #imgholder h2 { display: none; position: absolute; left: 600px; margin-top: 150px; } 

 <div id="imgholder"> <img id="firstimg" class="currentimg img" src="belvaros2.jpg" /> <img class="img" src="belvaros3.jpg" /> <img class="img" src="belvaros4.jpg" /> <img class="img" src="belvaros5.jpg" /> <img class="img" src="belvaros6.jpg" /> <h2 class="img">Esc to reset!</h2> </div> 

Thanks for any help!

Answer 1

Use keyup instead of keypress

  $(document).keyup(function(event) {

It worked for me!