当前位置: 代码迷 >> Web前端 >> JQuery Fancybox 施用整理
  详细解决方案

JQuery Fancybox 施用整理

热度:512   发布时间:2012-10-17 10:25:47.0
JQuery Fancybox 使用整理
jquery fancybox hideOnContentClick

又一个实现Lightbox效果的jQuery插件,不过采用了Mac系统的样式。它主要有以下功能:

  • 弹出的窗口有很漂亮的阴影效果。
  • 关联的对象(就是rel标签的值一样)会成组显示,上面还有导航的按钮(上一项,下一项)。
  • 可以显示图片、内联、ajax和iframe内容。
  • 可以通过设置参数和CSS定制效果。
  • 通过easing插件可以实现fancy transitions效果(就是一些动画效果)。

用法

1.引入必须的js库

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/jquery.fancybox.js"> </script>

如果要使用一些动画效果,还要引入以下js

<script type="text/javascript" src="path-to-file/jquery.easing.js"> </script>

2.导入CSS文件,由于CSS里使用的图片默认跟CSS是放在同一个目录下的,所以如果你的CSS跟图片分开放,记得修改CSS里的图片路径。

<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

3.创建一个链接元素
图片

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

inline内容

<a id="inline" href="#data">This shows content of element who has id="data"</a>

iframe框架

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

Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

可选项:如果要显示标题,可以通过设置a里的title属性实现。
注意:如果显示的为iframe或者inline内容而且在他们里面包含有可以点击的对象,那么把hideOnContentClick属性设为false,不然那个点击就会跟hideOnContentClick这个效果冲突了。
4.使用jQuery选择器调用功能。
例如:

$(document).ready(function() {     $("a#single_image").fancybox();     $("a#inline").fancybox({ 'hideOnContentClick': true });   $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });

相册效果需要把同一个相册的相片的"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页面

?

  相关解决方案