7.4.3　定制FancyBox

尽管FancyBox效果的外观确实不错，但是我们可能还是想用自己的显示外观进行一些修改。可以定制FancyBox外观的各个不同部分，包括用来关闭FancyBox窗口或导航到前一张图像或下一张图像的按钮；也可以修改覆盖页面的透明背景的颜色和透明度，或者改变图片框和标题框的背景颜色。一些改变涉及给FancyBox函数提供不同的选项，而另一些改变则需要你直接对CSS文件做出修改。

FancyBox选项

FancyBox插件允许提供定制选项，以影响light box效果的外观。基本上，我们给FancyBox函数传递一个对象直接量（参见4.8.3节），其中包含了希望设置的选项的名字和想要为其设置的值。例如，要改变放置在页面之上的背景的颜色和透明度，可以创建一个包含了新的设置的变量，并将其传递给FancyBox，如下所示：

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

overlayOpacity：.5，

overlayColor：’#F64’，

transitionIn：'elastic'，

transitionOut：'elastic'

}）；

在这个例子中，覆盖层的颜色设置为鲜红色（#F64），其透明度设置为50%（.5）。此外，transitionIn和transitionOut设置为elastic，这会影响到大图像如何出现在屏幕上。在这个例子中，elastic设置使得单击缩略图的时候较大图像出现在屏幕上，并且单击Close按钮（或者单击页面上的任何其他地方）的时候，图像从屏幕上消失（通常，较大的图像只是出现和消失，而没有任何动画效果）。

jQuery FancyBox接收很多不同的选项（参见http：//fancybox.net/api/的完整列表），这里只是介绍一些最有用的：

·overlayColor。在FancyBox显示图像的时候覆盖页面的背景颜色。这个选项接受一个十六进制的颜色值，例如#FF0033，如果没有设置这个选项，插件将会使用灰色（#666）。像下面这样设置这个选项：

overlayColor：’#ff6346’

·overlayOpacity。覆盖的透明度。这个选项设置了能够通过覆盖看到下面的页面的数量。我们指定了0到1之间的一个数值：例如，.5就是50%的透明度。如果不希望能够透过覆盖看到内容，例如，希望在图像显示的时候，Web页面的其他部分完全是黑色的，可以把这个选项设置为1。如果没有设置这个选项，FancyBox会把透明度设置为30%（.3）。将这个值设置为0，则会隐藏覆盖。

overlayOpacity：.5

·Padding。围绕着图像的空间，它创建了围绕着图像的一个可见的边框。通常，FancyBox将padding设置为10像素，但是，你可以将其更改为想要的任何值。0会完全去除弹出的图像的边框（参见本书7.5节，了解如何更改围绕着图像的边框的颜色）。直接提供一个数字（FancyBox假设这是像素值，因此，你不需要像通常在CSS中那样加上px）：

padding：5

·changeSpeed。当你在支持FancyBox的页面中从一幅图像移动到另一幅图像的时候，包含图像的边框会进行动画，它随着当前图像的尺寸而改变大小，以便与下一幅图像相匹配。你可以通过设置这一选项来控制这种变化的速度。默认值是300，表示300毫秒，或者说是略短于半秒。例如：

changeSpeed：500。

·transitionIn和transitionOut。这两个选项控制了较大的、弹出式图像如何出现在屏幕上。fade设置使得较大的图像从屏幕上淡入视线。这也是FancyBox通常使得一个弹出式图像显示的方式。none设置使得图像突然弹出到屏幕上。最后，elastic选项是视觉上最有趣的：它使得图像放到呈现在页面上。和缓动方法一起使用（参见下一小节），我们可以创建一些非常动态（并且可能有些恼人的）视觉效果。transitionIn选项控制较大的图像如何出现在屏幕上，而transitionOut选项控制图像如何消失。我们可以对二者进行不同的设置：

transitionIn：'elastic'，

transitionOut：'none'

·easingIn和easingOut。当transitionIn和transitionOut选项设置为elastic的时候，这两个选项有效（参见前面的列表项的介绍）。如果已经添加了easing插件（参见本书6.3节），它们接收诸如jQuery的swing或linear选项这样的一个缓动方法，你可以使用该插件所提供的任何缓动方法：

easingIn：'easeInBounce'，

easingOut：'easeOutSine'

·titlePosition。通常，当你给图像添加一个标题的时候（参见本书7.5节的注意），FancyBox将标题放在一个图形框的内部（一幅菱形的图像）。你可以更改这幅图像（参见本书7.4.3节），或者通过将titlePosition选项设置为outside（标题出现在包含图像的框之下）、inside（标题出现在包含图像的框之中）或者over（标题出现在包含图像的下边缘上）而直接不使用它。可以像下面这样设置这个选项：

titlePosition：'outside'

·Cyclic。通常，当你到达一个图像集的最后一幅图像的时候，只显示Previous按钮；并且，当你位于第一幅图像的时候，只显示一个Next按钮。当你设置将cyclic属性设置为true，即cyclic：true，访问者到达了图像集的最后一幅图像的时候，就可以按下Next按钮回到第一幅图像，并且，当浏览第一幅图像的时候，可以按下Previous按钮到达最后一幅图像。换句话说，这个选项允许你继续循环遍历图像而不会终结。

cyclic：true

下面是如何设置这些选项的一个例子。假设你将Fancy-Box应用于一组链接，以创建可以导航的弹出式图像的一个集合。你不想让图像集终结，因此，当访问者到达最后一幅照片的时候，她按下Next按钮跳到图像集的开始。此外，你想要删除围绕着弹出式照片的任何边框，使得它们放大或缩小，并且在每张照片的下面放置标题。你可以使用如下代码来做到这些：

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

cyclic：true，

padding：0，

transitionIn：'elastic'，

transitionOut：'elastic'，

titlePosition：'outside'

}）；

样式化FancyBox

FancyBox使用图像和CSS的组合来样式化其外观。它为Close按钮、导航按钮使用图像，并且在弹出式图像的下方显示下拉式阴影，同时用CSS样式来格式化这些空间的位置和大小。在访问较大的图像的时候，会动画地载入图像。你也可以调整这些图像，但是，首先需要理解FancyBox是如何组织其图像文件的。

首先，对于IE 6以外的所有浏览器，主图像都存储在一个单个的文件fancybox.png中（参见图7-7）。FancyBox使用一种叫做CSS精灵的方法，它将多幅图像存储在一个单个的文件中，但是，使用CSS和back-ground-image属性，在每个实例中只是显示该图像的一部分。例如，要显示Close按钮，FancyBox将fancybox.png作为一个背景图像载入到页面的一个链接中，但是，将该链接的width和height设置为30像素，并且，使用background-position属性来移动图像，以便只显示在fancybox.png文件的左上角。这种方法背后的原理是，只载入一个文件fancybox.png，而不是针对每个控件载入不同的文件，你的Web站点将会下载得更快，并且对于访问者来说响应更为积极（你可以在http：//css-tricks.com/158-css-sprites/获得关于CSS精灵技术的更多内容）。

除了图像外，FancyBox还在其外部样式表中包含了样式，用于格式化它所展示的不同元素。这里列出了最常见的元素，以及如何格式化它们：

·Close按钮。使用一个图形化的Close按钮，它出现在弹出图像的右上角。该图像是30像素宽，30像素高，并且位于fancybox.png文件的右上角。还有几种方式来修改它。如果你不喜欢30像素×30像素的大小，可以直接编辑fancybox.png文件：删除该文件右上角的30×30的图像，并且用你自己的设计来替换它。

在FancyBox样式表中（教程文件中的jquery.fancybox-1.3.4.css文件），你可以编辑#fancybox-close样式以获得更好的控件。在这个样式中，你可以控制Close按钮的位置（更改top和right设置），更改按钮的高度和宽度，甚至通过编辑background属性来指向一个不同的图像文件。

IE 6注意：FancyBox使用专门的CSS样式来克服IE 6中的bug。这个样式不会引用fancybox.png文件，而是为每个控件使用不同的图像。IE 6几乎是要消失的Web浏览器，因此，你很可能安全地忽略它，但是，如果你还是担心，并且想要更改控件图像的外观，那么，你需要编辑如下的图像文件：fancy_close.png（关闭按钮）、fancy_nav_left.png（前一个按钮）、fancy_nav_right.png（下一个按钮）、fancy_loading.png（动画加载过程中的图像）、fancy_title_main.png（用于标题图像的中央部分）、fancy_title_right.png（用于标题图像的右边部分）以及fancy_title_left.png（用于标题图像的左边部分）。或者，你可以完全免去这些麻烦，干脆忽略IE 6。

·Previous和Next按钮。和Close按钮一样，Previous和Next按钮都是fancybox.png文件中的图像（参见图7-7）。你可以编辑该文件（确保位于30×30像素的边界之中）。你也可以通过编辑这两个控件的样式，来使用不同的图像文件和不同的大小尺寸：一组选择器（#fancybox-left-ico、#fancybox-right-ico）提供了两个控件通用的属性（如宽度和高度），单个的样式（#fancybox-left-ico用于Previous按钮，而#fancybox-right-ico用于Next按钮）为这些控件设置图像。

·“加载中”图像。当访问者单击一个缩略图以使得一幅较大的图像弹出到页面上的时候，浏览器必须下载该文件。在等待的时候，一幅动画的图像会出现在屏幕上，表示正在访问该图像。这个图像实际上是fancybox.png文件中的一系列图像帧（参见图7-7）。其12个图像帧都是40像素高和40像素宽。要更改这个图像，我们需要编辑fancybox.png文件，并创建自己的12帧动画。CSS样式控制加载哪个图像，并且，其宽度是#fancybox-loading div样式。但是，如果你想要控制图像的位置、宽度和高度，还需要编辑#fancybox-loading样式。这有很多工作，并且，由于常规的“加载中”图像看上去很不错，你可能不想要修改它。

图　7-7　不需要使用FancyBox的选项设置来定制化FancyBox的外观。直接替换提供的图像，并且替换CSS文件，以允许你将设计调整得更加符合你的站点

·下拉阴影。围绕着弹出式图像出现的下拉阴影，是由一系列单独的图像文件所产生的，包括fancybox.png文件的几个部分。编辑这些图像很复杂，最好避免这么做。如果你确实为这里所介绍的不同空间使用不同的图像文件，并且编辑针对这些文件的CSS，请不要删除fancybox.png文件，它为下拉式阴影提供备用方案。

·围绕弹出式图像的边框颜色。通常，FancyBox显示了围绕着弹出式图像的一个白色边框。正如前面的小节所介绍的，你可以通过给FancyBox函数发送一个补白值来控制这个边框的大小。然而，要控制其颜色，你需要编辑FancyBox样式表。找到样式#fancybox-content，并且将其边框颜色从#FFF修改为你想要的任何颜色。

·图像背后的颜色。当想要创建一种图像集效果，其中，访问者可以单击向前和向后按钮，从一幅较大的图像跳转到另一幅较大的图像，当一幅图像淡出而另一幅图像淡入的时候，Fancy-Box显示了一种背景颜色。这种颜色由#fancybox-outer样式中的background属性来定义。将这个值设置为与你为边框颜色（上一个列表介绍）相匹配的任何颜色，这是一个好主意。

·Captions。我们可以通过编辑各种CSS样式来控制标题的颜色、字体和大小。#fancybox-title样式定义了标题的字体和字体大小，而.fancybox-title-inside、.fancybox-title-outside和.fancybox-title-over样式，根据其titlePosition设置影响到标题的外观（本书7.4.3节介绍）。例如，如果你将“titlePosition”选项设置为inside，标题将出现在图像的边框之中。如果你修改了边框颜色（参见前面的介绍），那么，你应该将.fancybox-title-inside样式上的background属性更改为和边框颜色相匹配。如果没有设置titlePosition选项，FancyBox使用fancybox.png文件中的图像来产生一个图形化的标题框。它将该图像划分为3部分（第一个用于该框的左边缘，第二个用于该框的中间部分，第三个用于该框的右边缘）。要修改所使用的图像，你可以编辑这样的样式：#fancybox-title-float-left、#fancybox-title-float-main和#fancybox-title-float-right。

提示：FancyBox允许我们创建一个定制的函数，从而以多种不同的方式来定制用于显示标题的HTML。在http：//fancybox.net/blog可以看到如何做到这点，还可以找到关于使用FancyBox的更多提示和技巧。