Using CSS to create an interactive HTML gallery that responds to keyboard input

Question

Using CSS to create an interactive HTML gallery that responds to keyboard input

Recently, I created a basic HTML/CSS gallery that functions like a table with next/previous buttons. However, I am looking to make it keyboard responsive. Specifically, I want users to be able to navigate through the photos by hitting the "left" button on their keyboard for the previous photo and the "right" button for the next page. I'm hoping to achieve this with minimal JavaScript/jQuery. I have searched online for solutions but haven't found any that meet my needs! If you require any code from my website, please don't hesitate to ask. Thank you in advance for your help!

javascript jquery html css keyboard

Answer 1

Answer №1

To capture keyboard interactions, you can utilize the .on() method along with the keydown event and then determine the action based on the returned value like so:

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    console.log(code)
    if (code == 40) {
        // Perform a specific action when the down arrow is pressed
        console.log("down arrow pressed")
    }
});

You can view this functionality in action on JSFIDDLE

The key codes for navigation arrows are as follows:

// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow

UPDATE: Instead of using multiple if statements, consider using a switch statement for better performance. Here's an example:

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    switch (code) {
        case 37:
            console.log("left arrow pressed")
            break;
        case 38:
            console.log("up arrow pressed")
            break;
        case 39:
            console.log("right arrow pressed")
            break;
        case 40:
            console.log("down arrow pressed")
            break;
        default:
            return false
    }
});

For the updated version, visit JSFIDDLE

Answer 2

To capture keyboard interactions, you can utilize the .on() method along with the keydown event and then determine the action based on the returned value like so:

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    console.log(code)
    if (code == 40) {
        // Perform a specific action when the down arrow is pressed
        console.log("down arrow pressed")
    }
});

You can view this functionality in action on JSFIDDLE

The key codes for navigation arrows are as follows:

// 37 = left arrow
// 38 = up arrow
// 39 = right arrow
// 40 = down arrow

UPDATE: Instead of using multiple if statements, consider using a switch statement for better performance. Here's an example:

$(document).on("keydown", function (e) {
    e.preventDefault();
    var code = e.which || e.keyCode;
    switch (code) {
        case 37:
            console.log("left arrow pressed")
            break;
        case 38:
            console.log("up arrow pressed")
            break;
        case 39:
            console.log("right arrow pressed")
            break;
        case 40:
            console.log("down arrow pressed")
            break;
        default:
            return false
    }
});

For the updated version, visit JSFIDDLE

Answer 3

Answer №2

Although JFK provided the correct answer, I took it a step further:

$(document).on("keydown", function (e) {
    var code = e.which || e.keyCode;
    if (code == 40 || code == 39) { // down & right
        // replace selector with your button id/class
        $('.btn-next').click();
    } else if (code == 38 || code == 37) { // up & left
        // replace selector with your button id/class
        $('.btn-previous').click();
    }
});

This code imitates clicking on next/previous buttons so you can implement any functionality that should occur with just one click or key press.

Answer 4

Although JFK provided the correct answer, I took it a step further:

$(document).on("keydown", function (e) {
    var code = e.which || e.keyCode;
    if (code == 40 || code == 39) { // down & right
        // replace selector with your button id/class
        $('.btn-next').click();
    } else if (code == 38 || code == 37) { // up & left
        // replace selector with your button id/class
        $('.btn-previous').click();
    }
});

This code imitates clicking on next/previous buttons so you can implement any functionality that should occur with just one click or key press.

Using CSS to create an interactive HTML gallery that responds to keyboard input

Answer №1

Answer №2

Similar questions

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

When utilizing the post method with fetch to send data, an empty object is returned

The unexpected outcome of ambient light in Three.js

Error: No route found at this location

Tips for sending information to a SharePoint 2013 list once jquery validation is finished

Header Dropdown Problems

Is there a way to insert data with a specific key into an array of objects without losing existing JSON data in Node.js?

Having trouble altering font-family, font-size, and font-weight with JavaScript?

The JQuery .click event is not functioning properly following the implementation of an AJAX filter

Identify support for the :first-child pseudo-class

The discrepancy in font size behavior between local and production environments is noticeable when using a React-Bootstrap Navbar

Utilizing Bootstrap 4 grid layout on high-resolution retina displays

Sharing data between two unrelated components in Angular 4

Sorting tables using jQuery and fixing CSS issues specifically for Internet Explorer 8

Creating an interactive HTML table using PHP data retrieved from an AJAX call

Collapse the mobile nav bar upon clicking an item

Unable to confirm the validity of the object within another object

Incorporating and designing a side button using jQuery Mobile

Struggling to keep my image buttons aligned in a horizontal line at the center, but they keep stacking vertically instead

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?