How can i make a keypress action to this code?

Question

I am new to JavaScript and jQuery so here is my question. How can i add to this code a simple key press action. Like if i press Right Arrow, go to the next image. and if i press the left arrow, go to the previous image. I've looked it up and tried something myself but i couldn't integrate anything into this particular code.

Now, i could simply use another code and use a lightbox gallery or something, but i don't want that because i've alredy got somewhere with the website and i can't make it all over again.

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>

I don't use Jquery, i am wondering if there's a way that i can use Jquery or Javascript to solve my problem. — Amanci Gabriel, May 18 '16 at 07:18

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

To detect key press using JQuery, you can bind a function to the keydownevent :

$(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)
});

(taken from there)

To change the displayed img, what you could do is something along the lines of this :

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

Then you'd have to implement a system to know which image is being displayed, and use this information to determine the next image to show.

EDIT : as requested, to make it go through the images :

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

var currentImg = 0;

Then in the keydown event handler, you'd have :

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;

Then you just have to update the src property of your img tag (after the switch) :

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

edited May 23 '17 at 12:31

Community

1
1

answered May 18 '16 at 07:20

Rosh Donniet

418
2
10

This is exactely my problem, i alredy stumbled upon this, but i don't know how to make it go through the images. – Amanci Gabriel May 18 '16 at 07:26
Damn, i'm really cofunsed here, i'm new to javascript, and you might not want to and thats ok too, but can you tell me why the code isn't working for me? i might be doing something wrong here, but when i implement the code after the "showLargeImagePanel" function the page shows no images. – Amanci Gabriel May 18 '16 at 08:41
Here's a working fiddle : https://jsfiddle.net/tcq5e1zx/ Tell me if you have any question – Rosh Donniet May 18 '16 at 09:38
Thank you so much for taking the time to help me here, here's a question: Is the javascript taking every picture as it is from the html? or do i have to insert all the photos in the javascript code? like you did with the images1,2 and 3. – Amanci Gabriel May 18 '16 at 09:47
I have to say it's a good script but my problem is that in HTML if i click one photo that is lets say the 14th photo and press the right arrow key it just goes back to the second image of array, i know that's what's supposed to happen but can i make this so that it reads the images from html and nviagates through them. if i do it your way i will always have to add the html and the javascript, or at least if it would navigate from the picture i currently view to the next one not from the beggining of the array. Thank you again, and sorry for being so hard headed – Amanci Gabriel May 18 '16 at 10:01
@AmanciGabriel No, it's not taking the pictures from HTML. If you really want to do that, there are many ways : you could change place each picture on top of each other, then change their z-index in the javascript. You could also hide every except the one you want to show. Or you could place all of your in a hidden div and copy the tag in your container. However, I think my solution is the cleanest. You only have to add the images' locations in the JS and you're done. – Rosh Donniet May 18 '16 at 12:08

How can i make a keypress action to this code?

1 Answers1