How to achieve the Facebook Photo Albums affect in the URI?

Question

Those who use Facebook have probably noticed the recent change to the photo albums and viewing of photos.

They allow you to use the left and right arrow keys on the keyboard to change the photo you are viewing.

I know there are many open source javascript scripts that do that for photo viewing as well but what is different... in the old facebook albums and other javascript photo albums, they seem to use the # in the URI/URL to get the ID's and then can make the ajax call.

Example;
http:mydomain.com/album.php?aid=12312&pid=43534#SomeIDhereAsWell

The new version on Facebook seems to have the same result/affect but the URL's look like this...

http://www.facebook.com/photo.php?fbid=1431582004331&set=a.1317260946376.35985.1676316284&theater
http://www.facebook.com/photo.php?fbid=1304601029886&set=a.1317260946376.35985.1676316284&theater
http://www.facebook.com/photo.php?fbid=1431444360890&set=a.1317260946376.35985.1676316284&theater

So there is no # in the URL for javascript to use, how can this be done?

I want to know this too. Did I find anything? – demux May 29 '11 at 16:05 — demux, May 29 '11 at 16:05
@Arnar Yngvason Still looking – JasonDavis Jun 04 '11 at 10:42 — JasonDavis, Jun 04 '11 at 10:42

score 0 · Answer 1 · answered Jun 13 '11 at 16:29

0

Here's how:

Note the URL's query params:

fbid=1431582004331 // id of the foto  
set=a.1317260946376.35985.1676316284  // id of the album 
theater  // indicates theater mode or the new 'mode'

On click of Prev/Next arrows (or keyboard event), send in the the above params and a flag saying whether prev or next button was clicked. The server sends the next photo in the set and then it does a window.location.replace to change the URL.

The JSON resposne also has helpful flags like 'IsLast' or 'IsFirstResponse' to enable/disable the arrow keys/icons.

Figured this out by looking at the FB javascript code.

answered Jun 13 '11 at 16:29

Mrchief

70,643
19
134
181

`window.location.replace` will do a redirect. – demux Jun 14 '11 at 03:16
Yeah. It does that in IE. I initially tried it in IE but after reading your answer, I dug deeper and found that for browsers that support history.pushState, it uses that, otherwise it uses hashbang redirects. – Mrchief Jun 14 '11 at 18:14

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I think it uses this:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Found it here: Change the URL in the browser without loading the new page using JavaScript

I've been testing it out here: http://django.liveproject.is/event/rff/

I haven't found out what to do with the back and forward button functionality or if I should use history.replaceState() rather than history.pushState().

EDIT:

I think this may be our answer: Cross-browser jquery ajax history with window.history.pushState and fallback

How to achieve the Facebook Photo Albums affect in the URI?

2 Answers2

EDIT: