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

Question Description

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.

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


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

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

</div>

Final Answer

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 ] = "li.next 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');"
and
href="#" onclick="$('.pg_previous a').trigger('click');"

Jymee (3)
New York University

Anonymous
The tutor managed to follow the requirements for my assignment and helped me understand the concepts on it.

Anonymous
The tutor was knowledgeable, will be using the service again.

Anonymous
Awesome quality of the tutor. They were helpful and accommodating given my needs.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors