7.5　教程：FancyBox照片集

尽管FancyBox确实很容易使用，但通过一个分步骤的教程来展示如何使用它总是有帮助的。在这个教程中，我们将把带有一组基本的缩略图的页面转换为一个有趣的弹出照片集。

注意：参见1.3节中“注意”部分以获取如何下载教程文件的信息。

1.在文本编辑器中打开chapter07目录下的文件fancybox.html。

这个文件和本章第一个教程开始时使用的文件相同，这是一组简单的缩略图。每个图像都链接到照片的一个较大版本，并且所有的缩略图都包含在ID为gallery的一个＜div＞标签中。

第一步是添加FancyBox所使用的CSS文件。

2.在文档的＜head＞部分找到＜link＞标签下的空行，该标签附加site.css样式文件（空行正好出现在第一个＜script＞标签的上方）。在这一行输入：

＜link href="fancybox/jquery.fancybox-1.3.4.css"rel="stylesheet"＞

jquery. fancybox-1.3.4.css文件包含了用来格式化FancyBox界面的各种元素的所有样式，包括关闭按钮的放置位置，照片标题文本的外观。接下来，我们需要附加该插件的JavaScript文件。注意，该页面已经添加了jQuery和jQuery缓动（参见本书6.3节）文件。

3.在添加了jquery.easing.1.3.js文件的＜script＞标签之后的空行里输入：

＜script src="fancybox/jquery.fancybox-1.3.4.min.js"＞＜/script＞

这个JavaScritp文件放在chapter07目录下的一个名为fancybox的文件夹中。由于FancyBox需要一组文件，包括JavaScript、CSS和图像，最简单的做法是将它们都放在同一个位置。这样，你只需要将本教程的fancybox文件夹复制到自己的站点，就可以使用FancyBox了。

这个页面已经有了另一个＜script＞标签，带有jQuery ready（）函数以及本章第一个教程中创建的预载入/翻滚魔术。只需要添加fancybox（）函数就够了。

4.单击$（document）.ready（function（）下面的空行并输入：

$（'#gallery a'）.fancybox（）；

所有指向较大图像的链接都包含在了ID为gallery的一个＜div＞标签中，因此，$（'#gallery a'）选择了它们，并且.lightBox（）函数对页面应用了FancyBox效果。

不管你是否相信，已经完成了。保存页面并在Web浏览器中预览。单击一个缩略图来看看发生了什么魔术。现在你明白为什么插件有用了吧，我们不需要进行任何编程就能够得到神奇的效果。

单击Close按钮或者页面上的任何其他地方，都会使得较大的图像消失。单击另一个缩略图，可以看到另外一个较大的图像。这种设置的一个问题是，每个缩略图都是彼此独立的。换句话说，为了看到另一个弹出的图像，你需要首先关闭当前的弹出图像，然后，单击一个缩略图。如果每次出现一个弹出图像，这会更好些，你只需要从一个较大的图像导航到另一个图像。简单地修改HTML就可以做到这些。

5.找到gallery＜div＞中的第一个链接：＜a href="../_images/large/slide1.jpg"＞，并且添加rel="gallery"，使得HTML如下所示：

＜a href="../_images/large/slide1.jpg"rel="gallery"＞

你提供给rel属性的实际值是无关紧要的（在这个例子中是gallery）。重要的是，对于你想要包含在组中的每幅图像来说，这个值是相同的。

6.为gallery div中剩下的5个链接，每一个都添加rel="gallery"。保存并预览该页面。

现在，在单击一个缩略图之后，你可以将鼠标悬停在弹出的图像的右边，此时可以看到一个Next按钮。单击该按钮，将会跳转到组中的下一张照片。将鼠标悬停在左边，将会看到Previous按钮。

所缺的是每张照片的标题。要添加一个标题，不需要任何JavaScript，只需要给每个＜a＞标签添加一个HTML title属性。

7.再次找到第一个链接，即＜a href="../_images/large/slide1.jpg"rel="gallery"＞，并且给该标签添加title="Lotsa golf balls"，使其如下所示：

＜a href="../_images/large/slide1. jpg"rel=“gallery"title="Lotsa golf balls"＞保存文件并在We b浏览器中预览。单击左边的第一个缩略图，看，标题出现了。给这个＜div＞中的其他＜a＞标签页添加title属性。现在，可以调整FancyBox的一些默认设置来定制其外观了。

8.通过在fancybox（）函数的圆括号中添加一个对象直接量，从而修改在步骤4中添加的代码。新的代码如下所示：

$（'#gallery a'）.fancybox（{

overlayColor：’#060’，

overlayOpacity：.3

}）；

这段代码给fancybox（）函数传递了一个对象直接量（参见4.8.3节）。对象直接量由三部分构成：首先是一个属性名，然后跟着一个冒号，最后是一个值。因此，overlayColor是FancyBox的一个选项的名称（参见7.4.3节），并且我们将其值设置为’#060’。这个特定的选项修改了弹出图像和页面之间的背景颜色。overlayOpacity设置控制了覆盖的透明度，在这个例子中，.3表示30%的透明度。

注意：对象直接量看上去有些奇怪，并且有一些奇怪的规则。确保在每个属性/值对的后面添加一个逗号，除了最后一个属性/值对以外。例如，上面的最后一行overlayOpacity：.3的末尾必须没有逗号。然而，如果你要添加更多的选项（就像在步骤10中所做的那样），则必须添加一个逗号。可以在4.8.3节看到关于对象直接量的更多信息。

9.保存页面并在Web浏览器中预览。

现在，当你单击一个缩略图的时候，会有一个绿色部分覆盖在页面上。接下来将要调整弹出图像如何在屏幕上弹出。

10.再次修改代码，添加一些额外的选项。新的代码如下面的粗体所示：

$（'#gallery a'）.fancybox（{

overlayColor：’#060’，

overlayOpacity：.3，

transitionIn：'elastic'，

transitionOut：'elastic'，

easingIn：'easeInSine'，

easingOut：'easeOutSine'，

titlePosition：'outside'，

cyclic：true

}）；

别忘了，在overlayOpacit y：.3的末尾添加逗号。当你将t ran si tio nI n和transitionOut设置为elastic的时候，当你单击一个缩略图的时候，弹出图像会出现在页面上，当你关闭弹出的图像时，它会从页面上消失。easingIn和easingOut选项使用了jQueryeasing插件（参见本书6.3节）来控制变换动画如何展开和恢复。最后，cyclic选项使得访问者一旦到达了组中的最后一张弹出图像，可以单击Next按钮循环回到组中的第一张图像。

11.保存页面并在Web浏览器中预览。

谁说JavaScript很难。文件complete_fancybox.html是本教程的完整的、可工作的版本。

FancyBox是很有趣和有用的插件。正如你将在下一章中看到的，它不仅限于显示图像。我们也可以使用它在页面的一个弹出窗口中显示HTML、视频或者整个Web页面。