jquery fancybox 弹层插件

张映 发表于 2012-10-22

分类目录: nodejs/vue/js/jquery

标签:, ,

fancybox是jquery的插件,功能强大。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,除了能展示层外,还可以展示iframed内容, 通过css订制样式。配合其他插件,能实现更旋的效果。

下载以及实例地址:http://fancyapps.com/fancybox/

到目前为止,fancybox的最新版本2.1.2,调用方法变了一些,参数也加了一些。在上面那个地址的最下面,有非常详细的参数说明。下面简单说一下使用过程。

1,要用fancybox,至少要加载二个文件

<script type="text/javascript" src="jquery.fancybox.js?v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.2" media="screen" />

在这儿有一点让我不爽,就是要加载css文件,jquery插件当中要加载css文件的并不多。

2,html调用fancybox的地方

<a id='fancybox' href="test1.html" >click here</a> //<a>标签里面加上一个class="fancybox.ajax",不然js里面要加参数type来说明

不知道从哪个版本开始,调用ajax的时候必须在class里面加上fancybox.ajax这个,调用iframe呢要加上fancybox.iframe。不然调不出来。前提是调用fancybox没有指定弹层类型的参数。指类型用type这个参数。

3,js调用fancybox

$("#fancybox").fancybox({
    'width'                : '30%',
    'height'               : '20%',
    'autoScale'            : false,
    'transitionIn'         : 'none',
    'transitionOut'        : 'none',
    'onClosed' : function() {alert('test');}
});

fancybox弹层插件有一点也要注意,就是不管是用ajax弹层,还是iframe来加载页面,弹出东西,要加上高和宽,如果不加的话,默认是自适应的。这样就会有问题,如果CSS用了特殊字体,即使你设置了,width和height,不同的浏览器计算出来的弹层大小会不一样。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1470.html

3 条评论

  1. celia 留言

    哈哈,我是celia 在goole 找东西,你的博客在第二页呢,

  2. 张映 留言

    哈哈,好长时间没联系了。

  3. 留言

    你好,我用如下方法弹出 不显示(就是在ie8 下面不显示),求解:
    // 增加派遣任务
    $("#addjob").fancybox({
    "maxWidth":300,
    "maxHeight":510,
    'hideOnOverlayClick':true,
    'autoScale':false,
    "href" : "index.html",
    "type" : "iframe"
    });

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   2X3=?