I was curious to figure out how e.g. flickr or facebook have implemented the behavior to move to the next image by simply pressing the right arrow key. Well, I do not really know down to the bleeding fingers, but here is my solution to move to the next page in a sequence of pages:
The mediathek of the Raum Schiff Erde offers a chronological tour for all sessions ever. The link to proceed to the next page in sequence has the attribute rel="next".
Then the head section needs a short jQuery/JavaScript to catch the right arrow key w/o the Ctrl/Cmd modifier pressed, identify the first link with the relation 'next' and trigger the link:
$(document).keydown(function(e) {
var arrow = {left: 37, up: 38, right: 39, down: 40 };
switch(e.which) {
case arrow.right:
if (e.metaKey) {return;}
document.location.href = $("a[rel='next']")[0].href;
break;
default: return;
}
e.preventDefault();
});
var arrow = {left: 37, up: 38, right: 39, down: 40 };
switch(e.which) {
case arrow.right:
if (e.metaKey) {return;}
document.location.href = $("a[rel='next']")[0].href;
break;
default: return;
}
e.preventDefault();
});
Have a look at the source code of the example above how to include the jQuery library.
I want to finish this little tutorial by mentioning that I did not invent the link relationships ('next' and 'prev') – but usually browsers do not make any use of this kind of semantic information. Heck, why not?! It would be cool if all web pagination would support this semantic behavior. Amen.
PS: A few more examples where I have applied the script:
- photo sets for all RSE conferences
- all my photo sets with forward and backward linking
- web version of my thesis Vision and Reality of Hypertext and Graphical User Interfaces
- metascript, my tumblr blog
