Next/Previous image using Arrow Keys on Keyboard on a simple image slider?

Tutor: None Selected Time limit: 3 Days

I have created a simple Image Slider provided by Ivan Lazarevic and was wondering how to add Next/Previous navigation to it, by using the arrow keys left and right on the keyboard. I've made some tests but can't seem to get it to work properly. I would also like the image to change to the next one when clicking on it. Would appreciate any help on the way.

$('#thumbs').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); });

<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.jpg" />

<div id="thumbs">
<img src="image_01_thumb.jpg" />
<img src="image_02_thumb.jpg" />


Nov 30th, -0001

Next/previous Navigation (i am doing it after ages so maybe it will help you old way of coding)

// when the document is ready, run this function
jQuery(function( $ ) {
  var keymap = {};

  // LEFT
  keymap[ 37 ] = "li.prev a";
  // RIGHT
  keymap[ 39 ] = " a";

  $( document ).on( "keyup", function(event) {
  var href,
  selector = keymap[ event.which ];
  // if the key pressed was in our map, check for the href
  if ( selector ) {
  href = $( selector ).attr( "href" );
  if ( href ) {
  // navigate where the link points
  window.location = href;

Change image to next when clicked
Your link tag should have # as the href and the js in an onclick event like this:
href="#" onclick="$('.pg_next a').trigger('click');"
href="#" onclick="$('.pg_previous a').trigger('click');"

Jun 28th, 2013

Nov 30th, -0001
Nov 30th, -0001
Oct 25th, 2016
Mark as Final Answer
Unmark as Final Answer
Final Answer

Secure Information

Content will be erased after question is completed.

Final Answer