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
    }