定制自己的FancyBox

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

FancyBox选项

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

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

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

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

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

overlayColor：’#ff6346’

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

overlayOpacity：.5

·Padding。围绕着图像的空间，它创建了围绕着图像的一个可见的边框。通常，FancyBox将padding设置为10像素，但是，你可以将其更改为想要的任何值。0会完全去除弹出的图像的边框。直接提供一个数字（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插件，它们接收诸如jQuery的swing或linear选项这样的一个缓动方法，你可以使用该插件所提供的任何缓动方法：

easingIn：'easeInBounce'，
easingOut：'easeOutSine'

·titlePosition。通常，当你给图像添加一个标题的时候，FancyBox将标题放在一个图形框的内部（一幅菱形的图像）。你可以更改图片的文件路径，或者通过将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中。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

定制自己的FancyBox相关推荐

基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
FancyBox API列表
FancyBox是一个基于jQuery的图片轮播插件,可定制很强.下表是它的API列表. 属性名默认值简要说明 padding 10 浏览框内边距,和css中的padding一个意思 margin ...
ujquery.fancybox api开发文档中文翻译版
2016年11月17日11:57:14 基础使用 http://fancybox.net/howto 1. 首先,请确保您使用的是有效的DOCTYPE这是FancyBox看起来和功能正确需要. 2. ...
『PyTorch』第十一弹_torch.optim优化器每层定制参数
一.简化前馈网络LeNet 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 im ...
一站式智能芯片定制技术
一站式智能芯片定制技术从55nm到5nm先进工艺,拥有创纪录(> 200次流片)和年10万片FinFET晶圆授权量产的骄人业绩,并且成功率高达100%.15年以来,先进工艺产品交付纪录持续行业 ...
先进一站式IP及定制
先进一站式IP及定制芯动科技15年来立足中国本土,目前已实现从130nm到5nm工艺高速混合电路IP核全覆盖,且所有IP均自主可控,一站式赋能国产芯片发展. 提供经过批量生产验证或硅验证的IP产品, ...
CodeGen融合核心扩展定制文件
CodeGen融合核心扩展定制文件融合核心定制文件 Harmony核心环境的各个方面都可以通过创建一个定制文件来定制,该文件是一个名为Harm的JSON文件onyCoreCustomization. ...
定制语音代理（智能体）的背后是什么？
定制语音代理(智能体)的背后是什么? What's behind the move to custom voice agents? 自动化是未来的发展方向.生活在一个现在的时代,希望所有的事情都能迅速 ...
java 启动参数_网红框架SpringBoot2.x之定制参数浅析（一）
我们都知道,SpringBoot框架最吸引人的地方之一就是他针对各种框架组件集成都提供了缺省的配置,"零配置"集成和开发是它的终极目标.理论上你不做任何特殊配置,都可以启动项目. ...

定制自己的FancyBox

定制自己的FancyBox相关推荐

最新文章

热门文章