Question

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');


    });



});

Answer 1

This should suit your needs, just slot it in, or if you need to use the left and right arrow keys elsewhere use $('#gallery') instead of $(document)

$(document).keydown(function (e) {
  if (event.keyCode == 37) {
    $('#next').click(); //on left arrow, click next (since your next is on the left)
  } else if (event.keyCode == 39) {
    $('#prev').click(); //on right arrow, click prev
  }
});

EDIT: if you need any other keyCodes use this site: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes