How to use arrow keys to reload new URl in browser

Question

Facebook and myspace both have a nice feature in the photo galleries, when you go to an image page, a page with the user's image and user comments on the page. You can hit you keyboard left and right arrow key and the page will load the next page, it does it super fast, if you held down the key it would go fast through many pages. I know this is mostly with javascript, my main question is how to make the new pages load all soo quickly?

Im using PHP/mysql/Javascript

Answer 1

You'd capture the keys the user is pressing, and response for left-arrows and right-arrows. Capturing keys isn't all that difficult:

$(window).bind("keypress", function(e) {
  var code = (e.keyCode ? e.keyCode : e.which); // which code?
  alert(String.fromCharCode(code)); // which key, according to the code?
});

You'd want to adapt that code to your liking. If the right arrow was click, fire off a request to get-image.php?direction=next&user=12838203 and if it were the back-arrow, simply swap out "next" for "prev".

$("#loading").show(); // fancy ajax loading animation
$.post("get-image.php", {direction:"next",user:12838203}, function(response){
  // hide our ajax loading animation
  $("#loading").hide();
  // if we get a proper response, like a source for a new image back
  $("#image").fadeOut("fast").attr("src", response).fadeIn("fast");
});

Answer 2

They are not actually loading pages, but only parts of it using Ajax. That's all there is to it - they are loading the images on the fly as you press the buttons. You can watch that in Facebook with an open Firebug in the "Net" tab.

If you're into JQuery, the JQuery Ajax page is a good starting point.

You could look into the source code of one of the popular lightbox scripts for real-world examples.