Keyboard Gallery Navigation

keyboard-gallery-controls.js

window.addEventListener('keyup', function(k) {
    switch(k.code) {
        case "ArrowRight":
            document.querySelector('.nav.controls .link.next').click();
            break;
        case "ArrowUp":
            document.querySelector('.nav.controls .link.up').click();
            break;
        case "ArrowLeft":
            document.querySelector('.nav.controls .link.prev').click();
            // window.history.back();
            break;
        default:
            console.log("Key Pressed:", k);
    }
});

• Whatever your links are inside should have class="nav controls"
• You make your next links always have class="link next"
• You make your pev links always have class="link prev" (you can uncomment line 11 if there are no previous links)
• You make your link to the gallery index, home or landing-page etc, always have class="link up"

Example

<ul class="nav controls">
    <li class="link prev"><a href="/wherever the last image was">Prev</a></li>
    <li class="link up"><a href="/wherever the place you reach the images / first images from most likely">Thumbs Gallery</a></li>
    <li class="link next"><a href="/wherever the next image is">Next</a></li>
</ul>