首页 > 网页特效 > 图片特效 > FancyBox 1.3.1 基于jQuery的灯箱效果(Lightbox)图片特效

FancyBox 1.3.1 基于jQuery的灯箱效果(Lightbox)图片特效

时间：2010-05-08 来源：

FancyBox 1.3.1是一款基于jQuery库的Lightbox灯箱效果的图片特效，代码简单易用，效果不错。1.3.1版相比旧版增加了更多的功能。

Various examples （相较旧版增加的功能）

Inline - auto detect width / height
Inline - modal window
Ajax - passing custom data
Ajax - filtering content
Iframe (75% width and height)
Swf
Example of callbacks
Non existing image
Non existing url

Examples of manual call （支持键盘操作）

Image
Image gallery

代码使用：

1. 在<head>区加入以下代码

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
 <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
  <link rel="stylesheet" href="style.css" />
 <script type="text/javascript">
  $(document).ready(function() {
        $("a#example3").fancybox({//ID选择符，需要跟图片ID保持一致
    'titleShow'  : false,//是否开启图片标题，参数：true,false
    'transitionIn' : 'none',//淡入效果，参数：true,none
    'transitionOut' : 'none'//淡出效果，参数：true,none
   });
  });
 </script>

2.在<body>区的代码示例如下：

<a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>

更多类型的应用详见压缩包的演示文件。