CODEWITHSUNDEEP
phpjquery
CruisinCosmo
CruisinCosmo

Reputation: 1157

Image Gallery With New Page per Slide

currently I have the a basic jQuery gallery:

<ul>
    <li>IMAGE</li>
    <li>IMAGE</li>
</ul>
// with NAV stuff

I cycle through the images with animations and everything works great.

However, my client "NEEDS" another setup, whereby there will be a new page per slide. GQ.com is a good example of this. Click the link to check it out.

If you will notice, each time you click 'Previous' or 'Next' a new page is loaded, creating more pageviews for the site.

My Question: Is it possible to have this with my current setup (b/c it can't change)? Or is it only possible through the server-side programming? How are they doing this?

Upvotes: 0

Views: 340

Answers (1)

treeface
treeface

Reputation: 13351

Take a look at what's actually happening there. The URL for the "next" button looks like this:

<a href="?slide=2" title="Next slide" onclick="s_objectID=&quot;http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim?slide=2_1&quot;;return this.s_oc?this.s_oc(e):true">Next</a>

But when you click on it, where does it take you? You get here:

http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim#slide=2

Notice the difference? It's a hash # instead of a question mark ?. They aren't reloading the entire page, they are making an HTTP request asynchronously in Javascript and using some form of hijax to change the browser's hash value (that which appears after the #...the only part that javascript can change), thereby allow the user to cycle backward and forward with the regular browser controls. The way to do this is to build in methods in your javascript to detect the value of what's after the hash both on page load and after a page's hash value has changed. Then you can have another javascript function actually control changing it when you click the "next" or "previous" buttons, and return false to kill the normal anchor href execution.

The reason this is called "hijax" is because your site still has perfectly-valid hrefs (e.g. you can go to that link above but replace the # with a ? and get to the exact same application state). This allows search engines to crawl your site and users without javascript to effectively use your site, while also providing all the AJAXery that people expect in fully-featured browsers. The trick here is to make sure that what comes after the # can be passed via AJAX to your server, have the server understand that it's an AJAX call, and process a return value that your javascript can understand. The easiest way is to use the extra bit after the # as the URL of your AJAX request and let the server interpret everything properly.

Upvotes: 1

Related Questions