Keyboard events for viewing the next and previous for a larger images
===

I need Keyboard events for viewing the next and previous for a larger images. Please help me out. As I am viewing the images if am clicking on the mouse, like this I have to view the images If am clicking on left and right arrow keys too.


**HTML**

    <div id="gallery">
    	<div id="overlay"></div>    
    	<div class="slidePanel">
    	  <div id="panel">
                <img id="largeImage" src="" />	
            </div> 		 
    	<div class="slideBtn">
    		 <a href="#" id="next">
    <img src="images/left_arrow.png" /></a> 
        		 <a href="#" id="prev"><img src="images/right_arrow.png" /></a> 
    	</div>
    	<div id="close"><a href="#">Close</a></div>	
    	</div> 
            <div id="thumbs" align="center">
                <img src="images/image_01_thumb.jpg" alt="1st image description" />
                <img src="images/image_02_thumb.jpg" alt="2nd image description" />
                <img src="images/image_03_thumb.jpg" alt="3rd image description" />
                <img src="images/image_04_thumb.jpg" alt="4th image description" />
            </div>
        </div>

**JS**

    function loadSlide(nSlide)
        {
            $('#thumbs img.current').removeClass('current');
            $(nSlide).addClass('current');
    
            var src = $(nSlide).attr('src').replace('thumb', 'large');
            $("#largeImage").fadeOut(function() 
            {
                this.src = src;
                $(this).fadeIn();
    		
            }).center();
    	$("#overlay").css({"opacity" : "0.7"})
    							.fadeIn("slow");	
    	$('#close a, #close').fadeIn();
    	$('#prev, #next').css('display', 'block');
    
    	
    
    
        }
    
        $('#next').click(function()
        {   
            var cSlide = $('#thumbs img.current');
            if($(cSlide).next('img').length > 0)
                var nSlide = $(cSlide).next('img');
            else
                var nSlide = $('#thumbs img:first');
    
            loadSlide(nSlide);
        });
    
        $('#prev').click(function()
        {
            var cSlide = $('#thumbs img.current');  
            if($(cSlide).prev('img').length > 0)
                var nSlide = $(cSlide).prev('img');
            else
                var nSlide = $('#thumbs img:last');
    
            loadSlide(nSlide);
        });
    
        $('#thumbs img').click(function(){
            loadSlide(this);
        });
    
    
    
    		$("#panel").click(function(){
    			$(this).fadeOut("slow");
    			$("#overlay").fadeOut("slow");
    		});
    
    
    	$('#close a').click(function(){
    		
    		$(this).fadeOut('slow');
    		$('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
    	$("#thumbs").css('display', 'block');
    
    	});
    
    	$('#thumbs img').click(function(){
    	$("#thumbs").css('display', 'none');
    
    
    	});
    
    		
       
    });

