Go to the rel = next and rel = prev page using the left and right arrows

I have a page with previous and next links:

<link rel="prev" href="http://camera.phor.net/cameralife/photos/11096&#63;referer=index.php"> 
<link rel="next" href="http://camera.phor.net/cameralife/photos/5679&#63;referer=index.php"> 

Can I use Javascript to navigate these links if the user presses the left arrow or right arrow? The link should not be activated if they edit the text, and the left or right arrow is pressed.

This will be used to simplify viewing multiple pages of images.

+5
source share
2 answers

Without jQuery: http://jsfiddle.net/UXPLt/1/ .

document.onkeyup = function(e) { // key pressed
    if(document.activeElement.nodeName === "INPUT"
    || document.activeElement.nodeName === "TEXTAREA") {
        return; // abort if focusing input box
    }

    var elems = document.getElementsByTagName("link"),
        links = {};

    for(var i = 0; i < elems.length; i++) { // filter link elements
        var elem = elems[i];
        if(elem.rel === "prev") { // add prev to links object
            links.prev = elem;
        } else if(elem.rel === "next") { // ad next to links object
            links.next = elem;
        }
    }

    if(e.keyCode === 37) { // left key
        location.href = links.prev.href;
    } else if(e.keyCode === 39) { // right key
        location.href = links.next.href;
    }
};
+4
source
$(document).keydown(function(e){
        if (e.keyCode == 37) {  // left
           $( "a[rel='prev']" ).click();
           return false;
        } else if (e.keyCode == 39) {  // right
           $( "a[rel='next']" ).click();
           return false;
        }
    });
+4
source

All Articles