fancybox ，比LightBox更绚丽的效果--fancybox官方教程（原创翻译）

今天在网上偶然间看到的一种效果：fancybox ，最新版本是1.3.1。这种效果类似于Lightbox 2.0，但比之更绚丽，而且支持swf视频格式，强烈推荐。

官方网站：http://fancybox.net/。

官方教程：

1，首先，你应当确定你的文档中应有一个有效的文档声明（即DOCTYPE声明），这是保证FancyBox效果能正常实现的前提条件。
2,请将以下js文件包含在你的效果展示页面

 

<script type="text/javascript" src="/fancybox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

 

可选项（即非必选项）：添加转场效果。jQuery默认仅支持“晃动”（ "swing"）和“线性”（ "linear"）两种转场效果。

<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

 

 

可选项：当开启Fancybox效果为"组效果"时，载入下面的js文件，可以通过鼠标滑轮滑动，来切换下（上）一张图片或者视频。

 

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

 

 

3. 添加 FancyBox CSS 文件

如果您的css文件没有放在fancybox文件夹内的话，请您注意修改css文件中背景图片、透明载入图像等图片的相对路径。(了解更多)

译者注：建议您在使用fancybox效果的时候，请直接将fancybox文件夹直接复制到您的网站目录下，为了使用方便，不推荐您修改文件夹的名字。

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

4·为链接元素添加Fancybox效果 (<a href>)

单独图像（Image）链接示例：

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

 行间（inline）元素链接示例：

 

<a id="inline" href="#data">This shows content of element who has id="data"</a>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

 

 

框架(iframe)元素链接示例：

 

<a href="http://www.example?iframe">This goes to iframe</a>

或者

<a class="iframe" href="http://www.example">This goes to iframe</a>

 

 

Ajax元素链接示例：

 

<a href="http://www.example/data.php">This takes content using ajax</a>

 

 

可选项：如果您想添加图片说明或视频字幕的话，您可以在链接标签上添加“title”标签。

注：如果您设定在Fancybox的弹出层上的是行间元素（如文字，表单等）或框架元素等包含链接的内容，例如电影视频播放器上的按钮、其他页面的一些链接等，您可能发现这些链接是不能够被点击的，这时您就需要设置 hideOnContentClick属性值为false。

译者注：如果您做的是企业站点，一定也会对您外链的视频（如优酷网，土豆网上的视频）上的广告（视频开始前与暂停中会出现）不胜其烦，想去掉它吗？很简单，你只需要修改jquery.fancybox-1.3.1.pack.js或者jquery.fancybox-1.3.1.js文件(取决于你的效果页面链接的是哪个文件)，在里面添加一段代码即可：allownetworking="internal"。附件文件中链接的是jquery.fancybox-1.3.1.pack.js，已添加了allownetworking属性。

 

 

5在您的效果页面添加jQuery选择器，激活“绚丽盒子”（Fancybox）

如果您对jQuery的知识不熟悉的话，请您阅读这篇入门教程。

下面是提供的一些示例，供您参考：

$(document).ready(function() {

    /* 基本应用-默认效果 */
    
    $("a#single_image").fancybox();
    
    /* 自定义设置 */
    
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });

    /* 应用fancybox效果到多个项目*/
    
    $("a.group").fancybox({
        'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    600, 
        'speedOut'        :    200, 
        'overlayShow'    :    false
    });
/* transitionIn,transitionOut（效果出入）属性值有三个：fade,elastic,none,含义分别为淡入淡出、弹性缩放、无，默认值为fade。
    titlePosition（标题字幕位置）属性值有三个：inside,outside,over,默认值为outside*/
    
});

 

 

注：上面的例子中用id来开启fancybox的，只能在一个页面中开启唯一的示例，如果你想在你所有的图片或者其他元素上用同一段脚本的话，你应当使用class。

注：如果您想创建图像组（即相册效果）或者视频组的话，请在链接元素上添加相同的"rel"标记值。

示例如下：

 

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */
    
$("a.grouped_elements").fancybox();

 

 原作者：fancybox.net

 翻   译：枫叶绿了 博客园首发，转载请注明出处。
 附   件：jquery.fancybox-1.3.1修改版.rar