每张幻灯片都有新页面的图库

Question

目前我有一个基本的jQuery画廊：

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

我使用动画循环播放图像，一切都很好。

然而，我的客户“需要”另一个设置，每张幻灯片将有一个新页面。 GQ.com就是一个很好的例子。点击链接查看。

如果您注意到，每次点击“上一个”或“下一个”时，都会加载一个新页面，为该网站创建更多的综合浏览量。

我的问题： 是否可以使用我当前的设置（b / c它不能更改）？或者只能通过服务器端编程？他们是怎么做到的？

Answer 1

看看那里发生了什么。 “下一步”按钮的URL如下所示：

<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>

但是当你点击它时，你需要在哪里？你到了这里：

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

注意区别？这是哈希#而不是问号?。他们没有重新加载整个页面，他们在Javascript中异步发出HTTP请求，并使用某种形式的hijax来改变浏览器的哈希值（出现在＃... javascript可以改变的唯一部分之后），从而允许用户使用常规浏览器控件前后循环。这样做的方法是在javascript中构建方法，以便在页面加载和页面的哈希值更改之后检测哈希值之后的值。然后，您可以使用另一个javascript函数实际控制在您单击“下一个”或“上一个”按钮时更改它，并返回false以终止正常的锚点href执行。

这称为“hijax”的原因是因为您的网站仍然具有完全有效的href（例如，您可以转到上面的链接，但将#替换为?并获得确切的结果相同的申请状态）。这样，搜索引擎就可以抓取您的网站和用户，而无需使用javascript来有效地使用您的网站，同时还提供人们期望在全功能浏览器中使用的所有AJAXery。这里的技巧是确保#之后的内容可以通过AJAX传递到您的服务器，让服务器了解它是一个AJAX调用，并处理您的javascript可以理解的返回值。最简单的方法是使用#之后的额外位作为AJAX请求的URL，让服务器正确解释所有内容。