FancyBox插件详细使用方法-定制自己的FancyBox （1）

标签：

转载请注明出处：http://www.uphtm.com/js/168.html

尽管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。

文章来源网页编程http://www.uphtm.com 转载请注明出处：http://www.uphtm.com/js/168.html

FancyBox插件详细使用方法-定制自己的FancyBox （1）

标签：

原文地址：http://www.cnblogs.com/coolhtm/p/4398158.html