title: Keyboard events for viewing the next and previous for a larger images
body: <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;div id="overlay"&gt;&lt;/div&gt;    
      &lt;div class="slidePanel"&gt;
        &lt;div id="panel"&gt;
              &lt;img id="largeImage" src="" /&gt;  
          &lt;/div&gt;       
      &lt;div class="slideBtn"&gt;
           &lt;a href="#" id="next"&gt;
  &lt;img src="images/left_arrow.png" /&gt;&lt;/a&gt; 
               &lt;a href="#" id="prev"&gt;&lt;img src="images/right_arrow.png" /&gt;&lt;/a&gt; 
      &lt;/div&gt;
      &lt;div id="close"&gt;&lt;a href="#"&gt;Close&lt;/a&gt;&lt;/div&gt; 
      &lt;/div&gt; 
          &lt;div id="thumbs" align="center"&gt;
              &lt;img src="images/image_01_thumb.jpg" alt="1st image description" /&gt;
              &lt;img src="images/image_02_thumb.jpg" alt="2nd image description" /&gt;
              &lt;img src="images/image_03_thumb.jpg" alt="3rd image description" /&gt;
              &lt;img src="images/image_04_thumb.jpg" alt="4th image description" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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 &gt; 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 &gt; 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');
  
  
      });
  
  
  
  });
  </code></pre>