FancyBox ,比LightBox更绚丽的效果

红薯 发布于 2011/01/23 10:52
阅读 3K+
收藏 9

官方教程:

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='/images/spd/jquery.fancybox-1.3.1.css' type="text/css" media="screen" />

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

单独图像(Image)链接示例:

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

 行间(inline)元素链接示例:

 

< 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)元素链接示例:

 

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

或者

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

 

 

Ajax元素链接示例:

 

< 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 */
<class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     

<class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></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();

加载中
0
用户已屏蔽
用户已屏蔽

强大,我要用了,哈哈

0
walden
walden
真想知道这个插件是怎么写的 如果我想自己写一个 有没有类似的教程啊
0
1的10次方
1的10次方

osc,我的福地啊。

返回顶部
顶部