jquery fancybox hideOnContentClick
又一个实现Lightbox效果的jQuery插件，不过采用了Mac系统的样式。它主要有以下功能：
- 弹出的窗口有很漂亮的阴影效果。
- 关联的对象（就是rel标签的值一样）会成组显示，上面还有导航的按钮（上一项，下一项）。
- 可以显示图片、内联、ajax和iframe内容。
- 可以通过设置参数和CSS定制效果。
- 通过easing插件可以实现fancy transitions效果（就是一些动画效果）。
用法
1.引入必须的js库
[cc lang="javascript"] [/cc]
如果要使用一些动画效果，还要引入以下js
[cc lang="javascript"][/cc]
2.导入CSS文件，由于CSS里使用的图片默认跟CSS是放在同一个目录下的，所以如果你的CSS跟图片分开放，记得修改CSS里的图片路径。
[cc lang="html"] [/cc]
3.创建一个链接元素。
图片
[cc lang="javascript"]
[/cc]
inline内容
[cc lang="javascript"]This shows content of element who has id=”data”[/cc]
iframe框架
[cc lang="javascript"]This goes to iframe This goes to iframe[/cc]
Ajax
[cc lang="javascript"]This takes content using ajax[/cc]
可选项：如果要显示标题，可以通过设置a里的title属性实现。
注意：如果显示的为iframe或者inline内容而且在他们里面包含有可以点击的对象，那么把hideOnContentClick属性设为false，不然那个点击就会跟hideOnContentClick这个效果冲突了。
4.使用jQuery选择器调用功能。
例如：
[cc lang="javascript"]$(document).ready(function() { $(“a#single_image”).fancybox(); $(“a#inline”).fancybox({ ‘hideOnContentClick’: true }); $(“a.group”).fancybox({ ‘zoomSpeedIn’: 300, ‘zoomSpeedOut’: 300, ‘overlayShow’: false }); });[/cc]
相册效果需要把同一个相册的相片的”rel“属相设为一样的值。
参数
padding
跟CSS里的padding差不多一个意思
imageScale
如果为true，则图片会被缩放以适应窗口
zoomOpacity
如果为true，则在动画过程中内容的透明度会改变
zoomSpeedIn
zooming-in动画时的速度，单位为毫秒。0的话动画将不会出现
zoomSpeedOut
zooming-out动画时的速度，单位为毫秒。0的话动画将不会出现
zoomSpeedChange
切换图片时的动画速度，单位为毫秒。值为0的话将不会出现动画
easingIn, easingOut, easingChange
决定动画使用何种easing效果
frameWidth
iframe和inline框口的默认宽度
frameWidth
iframe和inline框口的默认宽度
frameHeight
iframe和inline框口的默认高度
overlayShow
如果值为true的话，则显示遮罩，默认为false。遮罩的颜色可以在CSS里定义
overlayOpacity
遮罩的透明度。值为0到1.
hideOnContentClick
值为true的话，则在点击Fancybox对象时，Fancybox会被隐藏
centerOnScroll
值为true时，当用户滚动页面时，内容会一直居中显示
itemArray
可选项，可以设置自定义数组（事实上我还不知道用来干嘛的= =有空再研究下代码）
callbackOnStart
可选项，在Fancybox启动时会被调用
callbackOnShow
可选项，在Fancybox显示内容时会被调用
callbackOnClose
可选项，在Fancybox关闭时会被调用
兼容性
支持最新版本的FireFox, Safari 和 Opera ，还有 IE6 和 IE7。另外稍微测试了下，Chrome也支持。
下载
请到Google Code下载。文件包含了Fancybox这个插件以及实例。另外jQuery和easing这个插件也包含在里面。
FAQ
1.根本就运行不了。图片在新的窗口打开了。出了虾米错？
检查下你是否已经导入了所有的文件以及设置正不正确。
2.Fancybox可以在flash内容上面显示吗？
可以。看这里。
3.可以在iframe里调用代码吗？
因为Fancybox这个插件是依附在页面body上的，所以不能这样调用。如有需要请修改Fancybox的代码。
4.有没有Wordpress上可以使用的插件？
有一些，你可以试试这个。
5.怎样在其他元素上关闭Fancybox？
调用$.fn.fancybox.close()就行了。
以上内容基本都来自或者翻译自官网http://fancybox.net/。
这个东西其实在很早前就被我运用于项目了，当时还是1.0版本左右，后来作者很久没更新了，直到jQuery出了1.3后作者立刻就出了新版本了～
通过函数调用$(“#acl_link”).fancybox({‘hideOnContentClick’: false}).click();
‘hideOnContentClick’: false 点击不关闭，可用于ajax页面
没有评论