Event on Keypress

Question

This function returns to the thumbnail view when clicked on the enlarged image....

$('#wrapper > img').live('click',function(){
    $this = $(this);
    $('#description').empty().hide();

    $('#thumbsWrapper').css('z-index','10')
    .stop()
    .animate({'height':'100%'},speed,function(){
        var $theWrapper = $(this);
        $('#panel').css('height','0px');
        $theWrapper.css('z-index','0');
        /* 
        remove the large image element
        and the navigation buttons
         */
        $this.remove();
        $('#prev').hide();
        $('#next').hide();
    });
});

... besides click, I want it also close on keypress or just 'Esc' if possible?

Many thanks

Answer 1

If you want to bind escape you can check on keypress/keydown if the key is escape, and if so, use it, otherwise do nothing with it.

$('#wrapper > img').live('keydown keypress', function(e) {
    if (e.keyCode == 27)  {// Check if the keycode is 27, ie ESCAPE
        do your thing here
    }

Answer 2

I'd bind a keyup event to the document when the page loads, which checks if ESC was pressed.

Try it out: http://jsfiddle.net/AXMGM/

$(document).keyup(function( event ) {
    if(event.which === 27) {
        // Run your code to hide the element
        //   and perhaps first check to see if it needs to be done.
    }
});

jQuery normalizes the event.which such that it can be used in place of charCode and keyCode.

From the docs -

event.which normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input...

• http://api.jquery.com/event.which/
• http://api.jquery.com/keyup/