fancybox简单应用

fancybox，顾名思义“奇妙的盒子”，是一款基于jquery的开源特效插件（fancybox 2.0开始要收费了）。它可以用弹出层的形式展示图片，swf视频，和html文本；更为精确全面的介绍在 http://www.fancybox.net/home 。结合实际应用，在此说说4方面的用法。

首先添加jquery支持，以及fancybox自己的库和css定义等。

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<!--用于在图片集的时候，可以通过滑轮翻页 -->
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js">
</script><link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
     1、单个图片点击小图显示大图
html代码：<a id="img1" href="pic/pb1.jpg"><img src="pic/p1.jpg"></a> 
js代码：$('#img').fancybox();
解释：超链接中href指向的内容会显示在fancybox弹出层中。
     2、显示html文本
html代码：
<div style="display: none" >
<div id="data" >锦屏人忒看这韶光贱</div>
</div>
<a id="words" href="#data">文字</a>
js代码：$('#words').fancybox();
解释：对于fancybox的调用就此一种单调的形式，也可以添加json形式的参数，参数介绍详见 http://www.fancybox.net/api 。
     3、显示iframe
html代码：<a id="csdn" class="iframe" href="http://www.csdn.net/">iframe</a>
js代码：$('#csdn').fancybox();
解释：上面的ifram是fancybox已经定义的css样式
     4、显示图片集
html代码：
<a class="grouped_element" href="pic/p4.jpg"><img src="pic/p4.jpg"></a>
<a class="grouped_element" href="pic/p5.jpg"><img src="pic/p5.jpg"></a>
<a class="grouped_element" href="pic/p6.jpg"><img src="pic/p6.jpg"></a>
js代码：
$('a.grouped_element').fancybox({
titlePosition: 'over',
cyclic:true,
titleFormat: function (title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over"> image ' + (currentIndex + 1) +
' / ' + currentArray.length + ' ' + title + '</span>';
}
});
解释：回调函数用于构造图片显示信息。