How to use arrows to change page in jquery?

Question

With jquery I need to do something like this...

A user will follow a link to a users photo gallery on my social network site. A photo will load on the page and comments related to that photo with paging will be under the photo. Basicly this photo and comments will be a seperate page that is loaded in with AJAX, then when a user presses the left or right arrow key, I would like to load a different photo/comments page into the page.

So far it sounds pretty simple I think but I would like to append something to the URL when a new page is loaded. Lets say a page will be like this in the URL photos.php?user_id=2342323&photo_id=4234124 when they use arrow to load next image it should change to add something like this on #3523543 then when a user copy/paste that URL it would load the correct photo in the browser.

Any ideas how to do this in jquery?

Answer 1

Might be best to have a "Share This" link (a la Amazon, etc) that has the correct URL.

Answer 2

You can't change the url (window.location) without causing a reload. You could provide the url to the new photo somewhere in your page though.

Answer 3

Facebook does this, I think. Perhaps you could take a look at the source of a Facebook album to see how it's done, and translate that concept to jQuery?

Answer 4

Here are two implementations of what you're asking:

http://stevenxu.ca/samples/url_rewrite/3a

http://stevenxu.ca/samples/url_rewrite/3b

Try to firebug your way through it. If you need a more detailed explanation, check out below...

Your question inspired a two-part blog post, where I go over the solution in detail. I haven't put up a sample implementation yet, but I'll do that soon.

My solution covers everything you need, but it excludes the left and right arrow keys. A simple jQuery keyup listener will be more than sufficient to fill that role. If you need help writing an implementation, just leave a comment.

Basically, you take advantage of a browser quirk that allows you to rewrite the URL with window.location = 'something'; without reloading the page. Then you implement a client-side listener to create the resultant permalink. Full solution is in my blog post. First post is mainly theory, and second post is execution.