Creating keyboard shortcuts

JavaScript
1

I have created a lightbox/slideshow/thing here and have created a shortcut so the Esc key closes the lightbox. I would like to make it so the left arrow key goes to the previous slide and the right arrow key to the next slide.

I’m guessing I need to add some markup to create this, but I’m not sure what…

2

Hey @Gandalf, no not at all – you can just trigger a click event the corresponding navigation link. Actually you might then handle the Escape key the same way:

function trigger (element, action) {
  var link = element.parentNode.querySelector('.cssbox_' + action)

  if (link) {
    link.click()
  }
}

document.addEventListener('keyup', function (event) {
  switch (event.key) {
    case 'Escape':
      return trigger(event.target, 'close')

    case 'ArrowLeft':
      return trigger(event.target, 'prev')

    case 'ArrowRight':
      return trigger(event.target, 'next')
  }
})
3 Likes
3

Oh cool. Thanks @m3g4p0p. Works a treat. I’ll have to leave trying to follow the logic tomorrow…

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.