FancyBox1.3.1 jQuery的灯箱效果

FancyBox1.3.1 jQuery的灯箱效果
 点击预览  点击下载
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 (支持键盘操作)
代码使用:
 
1. 在<head>区加入以下代码
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
  2.  <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
  3.  <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
  4.   <link rel="stylesheet" href="style.css" /> 
  5.  <script type="text/javascript"> 
  6.   $(document).ready(function() { 
  7.         $("a#example3").fancybox({//ID选择符,需要跟图片ID保持一致 
  8.     'titleShow'  : false,//是否开启图片标题,参数:true,false 
  9.     'transitionIn' : 'none',//淡入效果,参数:true,none 
  10.     'transitionOut' : 'none'//淡出效果,参数:true,none 
  11.    }); 
  12.   }); 
  13.  </script> 
2.在<body>区的代码示例如下:
  1. <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a> 
更多类型的应用详见压缩包的演示文件。

转载请注明:代码家园 » FancyBox1.3.1 jQuery的灯箱效果

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)