What is the best way to implement a keypress event in this code?

Question

What is the best way to implement a keypress event in this code?

As a JavaScript and jQuery newbie, I have a question regarding adding a simple key press action to this code. How can I implement functionality where pressing the Right Arrow key takes me to the next image, and pressing the Left Arrow key takes me to the previous image? I've tried researching and experimenting on my own but haven't been able to seamlessly integrate anything into this specific code.

While I could opt for another solution such as using a lightbox gallery, I prefer not to go that route as I've already made progress with this website and don't want to start from scratch.

function showImage(smSrc, lgSrc) {
  document.getElementById('largeImg').src = smSrc;
  showLargeImagePanel();
  unselectAll();
  setTimeout(function() {
    document.getElementById('largeImg').src = lgSrc;
  }, 1)
}

function showLargeImagePanel() {
  document.getElementById('largeImgPanel').style.display = 'block';
}

function unselectAll() {

  if (document.selection)
    document.selection.empty();
  if (window.getSelection)
    window.getSelection().removeAllRanges();
}

#largeImgPanel {
  text-align: center;
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.8);
}

<img src="./images/t_p0001.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0001.JPG');" />
<img src="./images/t_p0002.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0002.JPG');" />
<img src="./images/t_p0003.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0003.JPG');" />
<img src="./images/t_p0004.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0004.JPG');" />
<div id="largeImgPanel" onclick="this.style.display='none'">
  <img id="largeImg" style="height:100%; margin:0; padding:0;" />
</div>

javascript jquery html css navigation

Answer 1

Answer №1

Using JQuery to detect key presses can be done by binding a function to the keydown event:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

(referenced from here)

To update the displayed image, you can use something like this:

$("#largeImgPanel").html('<img src="./images/t_p0001.jpg" style="cursor:pointer"');

Then you would need a system in place to track which image is currently being displayed and determine the next image to show based on that.

EDIT: To cycle through multiple images as requested:

var imgs = ["./images/t_p0001.jpg", "./images/...", etc];

var currentImg = 0;

In the keydown event handler, add:

case 37: // left
if (currentImg === 0) {
    currentImg = imgs.length - 1;
}
else {
    currentImg--;
}
break;
case 39: // right
if (currentImg === imgs.length - 1) {
    currentImg = 0;
}
else {
    currentImg++;
}
break;

Finally, update the src property of your img tag (after the switch statement):

if (e.which === 37 || e.which === 39) {
    $("#largeImgPanel>img").attr("src", imgs[currentImg]);
}

Answer 2

Using JQuery to detect key presses can be done by binding a function to the keydown event:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

(referenced from here)

To update the displayed image, you can use something like this:

$("#largeImgPanel").html('<img src="./images/t_p0001.jpg" style="cursor:pointer"');

Then you would need a system in place to track which image is currently being displayed and determine the next image to show based on that.

EDIT: To cycle through multiple images as requested:

var imgs = ["./images/t_p0001.jpg", "./images/...", etc];

var currentImg = 0;

In the keydown event handler, add:

case 37: // left
if (currentImg === 0) {
    currentImg = imgs.length - 1;
}
else {
    currentImg--;
}
break;
case 39: // right
if (currentImg === imgs.length - 1) {
    currentImg = 0;
}
else {
    currentImg++;
}
break;

Finally, update the src property of your img tag (after the switch statement):

if (e.which === 37 || e.which === 39) {
    $("#largeImgPanel>img").attr("src", imgs[currentImg]);
}

What is the best way to implement a keypress event in this code?

Answer №1

Similar questions

Using jQuery to send a GET or POST request directly to a PHP function

Leveraging jQuery for Sending Form Data to an ASP.NET ASMX Web Service

Uploading files in ASP.NET MVC without creating a view, utilizing Valums Ajax Uploader technology

What could be causing the error in sending JSON data from JavaScript to Flask?

Update the contents of TubeBufferGeometry with a new TubeBufferGeometry directly, avoiding unnecessary memory allocation

Challenge with form validation

Obtain the total sum from the array of objects that are nested within

Icon with label and border using Font Awesome

Transmit a set of binary information and efficiently store it on the server's end

How can I make Backbone.js execute a function following the creation of a Collection?

Issue with Jquery functionality on IE9 Release Candidate

When the Model popup is activated, it is essential for elements to have an adequate color contrast

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

What strategies can I use to prevent the need to create new instances of my service and repository for every

What is the best way to display multiple HTML files using node.js?

Extracting data from string in object form

Having trouble customizing the Material UI button in React?

Guide on deactivating the HTML drawer layout on a website with Selenium using Java

Regular expression for capturing multi-line HTML comments using preg_match_all