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

时间:2021-02-24 10:16:31

转载请注明出处: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