定制自己的FancyBox

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

FancyBox选项

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

1. $（'#gallery a'）.fancybox（{
2. overlayOpacity：.5，
3. overlayColor：’#F64’，
4. transitionIn：'elastic'，
5. transitionOut：'elastic'
6. }）；

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

jQuery FancyBox接收很多不同的选项，这里只是介绍一些最有用的：

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

1. overlayColor：’#ff6346’

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

1. overlayOpacity：.5

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

1. padding：5

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

1. changeSpeed：500。

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

1. transitionIn：'elastic'，
2. transitionOut：'none'

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

1. easingIn：'easeInBounce'，
2. easingOut：'easeOutSine'

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

1. titlePosition：'outside'

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

1. cyclic：true

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

1. $（'#gallery a'）.fancybox（{
2. cyclic：true，
3. padding：0，
4. transitionIn：'elastic'，
5. transitionOut：'elastic'，
6. titlePosition：'outside'
7. }）；

样式化FancyBox

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

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

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

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

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。转载请注明出处：http://uphtm.com/js/168.html