7.3　教程：带有效果的照片集

现在，我们要扩展上一个教程来创建一个单页的照片集。当访问者单击缩略图像的时候，我们能够载入一幅较大的图像（如图7-3所示）。此外，我们使用几个jQuery效果函数来实现较大图像之间的转换，从而带来有趣的视觉效果。

7.3.1　任务概览

这个照片集的工作方式相当简单，单击缩略图来查看一幅较大的图像。然而，这个教程通过使用淡化效果将较大的图像换入换出页面，从而展示了如何添加一些功能使得显示更有趣。

图　7-3　完成后的照片集页面。单击缩略图将会让一幅较大的图像淡入视线，并且当前的图像淡出。这个教程文件的完成版本complete_gallery.html位于chapter07目录下

我们将要在这里使用的另一项重要的技术是无干扰的JavaScript。这只是意味着，关闭了JavaScript的用户仍然能够访问图像的较大版本。为了做到这点，每个缩略图都包含在一个链接中，该链接指向较大的图像文件（如图7-4所示）。对于那些没有使用JavaScript的访问者，单击链接会退出当前的Web页面并且按照链接载入较大的图像文件，但是照片至少是可以访问到的。对于那些支持JavaScript的访问者，单击链接将会使得较大的图像在页面上淡入视线。

图　7-4　照片集的基本结构。所有的缩略图都包含在链接中，该链接指向该照片的较大的版本。单击每个链接，将会载入ID为photo的一个＜div＞中的较大图像

所有操作都发生在单击链接的时候，因此，这段脚本使用链接的click事件来实现如下的步骤：

·停止链接的默认行为。通常，单击一幅链接会把我们带到另外一个页面。在这个页面上，单击包围一个缩略图的链接会退出Web页面并且显示一幅较大的图像。既然将要使用JavaScript来显示图像，可以添加一些JavaScript代码阻止浏览器打开该链接。

·获取链接的href值。链接实际上指向较大的图像，因此通过获取链接的href，我们也就获取了较大图像文件的路径。

·创建一个新的图像标签以插入页面中。这个图像标签将包含来自href值的路径。

·淡出旧的图像而淡入新的图像。随着单击的缩略图的较大版本淡入视线，当前的图像淡出视线。

这个教程包含了一些其他细微差别，但是，这4个步骤包含了基本过程。