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

User Generated

avffr4x

Programming

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>

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & 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');"


Anonymous
Just what I was looking for! Super helpful.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags