Question

im trying to make userfriendly keyboard navigation for jumping between loads of images in a vertical list.

example:

<img src="1.jpg"><br>
<img src="x.jpg"><br>
<img src="9.jpg"><br>
<img src="1357.jpg"><br>
<img src="lol.jpg"><br>

im trying to make the right keyboard arrow scroll down one image, while the left arrow will scroll up one image.

i was first thinking i could add anchors above each image, and then make a JS function that will go to those anchors when the keyboard arrows are pressed. but there surely have to be a more clever and robust way of doing this?

Answer 1

Set anchors.

Reference the anchors in a list.

Use the keyboard to cycle through the list.

As you recommended is the standard way to do it. If you want to make it more robust, then put all of those images in a common class, and dynamically create the list at runtime.

$.(".classname").each(function(){ add the element to the list as you see fit }