我的书签
添加书签
移除书签7.4 使用jQuery lightBox的高级照片集
显示照片集是如此常见的一个任务，以至于可以看到多种不同的方法来展示你的想象力。一种非常流行的技术是，淡化Web页面并显示缩略图的较大版本，就好像它们是漂浮在浏览器窗口之上（如图7-6所示）。这种方法的最著名版本就是一个叫做Lightbox（http：//lokeshd hakar.com/projects/lightbox2/）的JavaScript程序。最初的程序有了很多版本，还有几个编写成了jQuery插件。本节使用的是强大的FancyBox jQuery插件（http：//fancybox.net/）。FancyBox创建了一种引人入胜的方式来把图像显示为一个文件夹、照片集或幻灯片的一部分，而这只需要使用一行代码。
注意：在继续介绍之前，你可能想要打开包含在本书教程文件的chapter07目录下的文件complete_fancybox.html。它是FancyBox的一个演示版本。先看看其效果，这可能会使得本节剩下的内容更容易理解。
图 7-6 由Janis Skarnelis开发的FancyBox jQuery插件给出了一种非常容易的方式，用来创建一个吸引人的单页照片集。当把鼠标光标放到图像上的时候，可以通过单击此时出现的Next或Previous按钮在一系列照片中导航。此外，还不仅仅限于照片。我们可以使用FancyBox弹出打开YouTube视频，或者嵌入常规的HTML内容（来自其他站点的一般内容）
7.4.1 基础
FancyBox非常容易使用，只需要建立好Web页面，其中带有到想要显示的图像的链接，给页面附加.css和.js文件，并且添加一行代码来启动light box。
1.设置照片集页面。
确实没有太多事情要去做，只是添加希望显示在页面上的较大图像的链接。这应该是添加到缩略图的链接，以便在单击缩略图的时候，会出现较大的图像（我们在前面的教程中编写的照片集就是这么工作的）。重要的是，要记住，链接指向一个图像文件，即.png、.jpeg或者.gif文件，而不是指向一个Web页面（在本书8.4节，你将学习如何使用FancyBox来显示诸如其他Web页面以及Flash电影视频这样的非图像内容）。
此外，需要一种方式来表示这仅仅是照片集链接（相对于页面上的其他链接而言）。一种方式是，把链接包含到带有特定ID（例如gallery）的一个＜div＞标签中。然后，我用’#gallery a'的一个选择器就可以找到那些链接。另一种方式是，为每个照片集链接指定一个特定的类名，例如＜a href="images/potato.jpg"class="gallery"＞。那么，可以使用'a.gallery'这样的一个选择器找到这些链接。如果链接散布在页面的各处而不是包含在单个的＜div＞中的，后一种方式更方便。
提示：要为照片添加标题，只要给那些链接到较大图片的＜a＞标签添加一个title属性即可。例如：
＜a href="images/potato.jpg"title="A handsome potato”＞
2.下载FancyBox文件并将它们放入到站点。
可以在http：//fancybox.net找到这些文件。本书的教程文件中也提供了这些文件，它们位于chapter07下的fancybox目录中。一个好办法是，直接将这个fancybox文件夹复制到你自己的Web站点中（根目录是个不错的选择）。这里有需要的几个文件：一个JavaScript文件、一个CSS文件和几个图像文件。
·JavaScript文件的名字类似于jquery.fancybox-1.3.4.js，这里1.3.4表示版本号。在chapter07教程目录中，可以找到文件名为jquery.fancybox-1.3.4.min.js的一个精简版（或压缩版）。可以把这个文件放在站点的任何地方，但是，最简单的方式是将其和其他文件一起放在fancybox文件夹中。
·CSS文件jquery.fancybox-1.3.4.css，包含了用于格式化FancyBox效果的各个部分的CSS，例如阴影效果、Next、Previous和Close按钮，以及标题的外观。由于这个文件引用很多不同的图像文件（fancybox.png、fancy_title_main.png等），将CSS文件存放在和其他图像相同的目录下，这是最好的
·做法（这也是最好将所有和FancyBox相关的文件一起放在同一目录中的原因）。FancyBox还需要一系列的图像文件：这些文件中的一些专门用于克服IE 6的bug，而另一些则用来添加诸如阴影、用于标题的图形框以及用于导航按钮的图像等视觉元素。我们将在本书7.4.3节了解不同文件的更多信息。
3.给页面附加外部样式表。
jQuery FancyBox使用一些有趣的CSS来实现黑色、透明覆盖效果以及显示弹出式图像。可以像任何CSS文件一样附加这些文件。例如：
＜link href="fancybox/jquery.fancybox-1.3.4.css"rel="stylesheet"＞
大多数JavaScript程序员在进行JavaScript编程之前放置好了所有的样式表信息，一些JavaScript程序依赖于首先可用样式表信息，这样程序才能正确工作。对于很多jQuery插件来说，尤其是这样，因此，养成习惯在放置JavaScript文件和程序之间放置好所有的样式表。
4.添加JavaScript文件。
jQueryFancyBox的大部分功能来自于jQuery库（毫不奇怪），因此，必须首先给页面添加jQuery文件（参见4.3节）。此外，FancyBox JavaScript文件（像任何使用jQuery的JavaScript一样）必须添加在jQuery文件之后。例如：
＜script src="js/jquery-1.6.3.min.js"＞＜/script＞
＜script src="fancybox/jquery.fancybox-1.3.4.js"＞＜/script＞
此外，FancyBox还使用了本书6.3节介绍的缓动方法，用来控制较大的图像如何进入或退出页面。如果你想要使用jQuery的标准的swing和linear之外的任何缓动方法，那么，必须添加easing插件。例如：
＜script src="js/jquery-1.6.3.min.js"＞＜/script＞
＜script src="js/jquery.easing.1.3.js"＞＜/script＞
＜script src="fancybox/jquery.fancybox-1.3.4.js"＞＜/script＞
5.添加一个＜script＞标签，然后是jQuery ready（）函数，并且调用FancyBox.。
不管你是否相信，上面的步骤1到步骤4是整个过程的最难的部分。让FancyBox工作只需要一行JavaScript代码。当然，正如5.4.1节所介绍的，我们应该把代码放置到一个jQuery ready（）函数中，这样，浏览器就已经处理了HTML并准备好操作DOM。例如：
＜script＞
$（document）.ready（function（）{
$（'#gallery a'）.fancybox（）；
}）；
＜/script＞
fancybox（）函数必须只是应用于那些指向要显示的图像的链接。我们使用一个jQuery选择器（例如$（'#gallery a'））来告诉FancyBox用于哪个链接：在这个例子中，位于ID为gallery的标签中的任何＜a＞标签都会变为FancyBox效果的一部分。正如步骤1中所提到的，我们需要设置HTML以便可以使用jQuery来找到组成lightbox的特定链接。
就是这样。现在，当单击每个照片集链接时，页面上都会出现一个透明的背景，并且图像的一个较大版本会出现在窗口的中央。
