Adding js to navigate items with arrow keys

I would like to use the following javascript to allow users, (myself included), to navigate Omeka items by using the left and right arrows.

$(document).ready(function() {
    $(document.body).keyup(function(event) {
        if (event.which === 37) {
            $('#previous-item').click();
        } else if (event.which === 39) {
            $('#next-item').click();
        }
    });
});

I have tried adding <?php queue_js_file('arrows'); ?> and <?php queue_js('arrows'); ?> to the header.php and items/show.php page without success.

My page navigation code is:

<ul class="item-pagination navigation">
    <li id="previous-item" class="previous"><?php echo link_to_previous_item_show(); ?></li>
    <li id="next-item" class="next"><?php echo link_to_next_item_show(); ?></li>
</ul>

so it seems like the javascript is adapted correctly.

The js is located in my theme's javascripts folder and is named arrows.js.

I am using the Seasons theme if it matters.

I appreciate any assistance!
Thanks

First thing I'd double-check is that you are adding the queue_js_file('arrows'); before <?php echo head_js(); ?> is called in header.php.

After that, I'd probably try logging something to the javascript console to make sure that the script is there and running.

Console shows: "TypeError: $ is not a function"

I know 0 about js, so Im not sure what this means.

Omeka has jQuery use its "no conflict" mode, which doesn't define the $ variable.

Changing your first line to this:

jQuery(document).ready(function($) {

should fix that problem.