How do I load content based on URL without hashes or php variables?

Question

Let me know if this question needs more clarification.

I am a front-end developer, and I usually use Wordpress with lots of custom fields to put together a CMS for clients.

A current client wants a design portfolio site that initially presents a grid of images that link to projects, but instead of loading a new page on click, the new content loads and fades in smoothly.

I figure the simplest way to do this kind of thing is to load everything up front on one page with ajax (a loading screen is OK), and then just show/hide/move content with jQuery.

The request I am having trouble with is being able to have specific URL's for different projects and images. The client wants a URL scheme like here: http://collins1.com/work/bp-helios-house/3

Where the number at the end causes a specific image to load in the given project. It seems like this would be simple enough using php variables where like:

http://www.whatever.com?project=3&image=2

And using those to manipulate the initial AJAX load.

But how is this accomplished using a more traditional (pretty) URL structure like the example? If I am building the site as one page loading content, won't the browser attempt to load that as a page and just come up with a 404?

Bonus: How do you change the URL in the address bar to create these links as the user navigates the site without reloading the page?

Thanks!

Answer 1

what you see there, is called url routing. Basically, some server rule that rewrites the url in a proper way, depending on server and scripting language used.

for example, the url

http://server.com/foo/bar

MAY be redirected to

http://server.com/index.php?foo=bar

If you need a lightweight framework to handle this, take a look at www.slimframework.com

Answer 2

If you want real pretty urls you are going to need a server-side framework for url routing and will require you to get into php or ruby on rails. If you want a pure front end solution you can fake it in javascript using hash fragments. For how to do this see

http://backbonejs.org/#Router

http://www.asual.com/jquery/address/

http://benalman.com/projects/jquery-hashchange-plugin/