fancybox1.3.1 基于Jquery的插件在IE中图片显示问题


Posted in Javascript onOctober 01, 2010

主要特色有:

显示HTML,swf,Iframe,ajax请求
支持鼠标滚动显示图片
支持阴影,放大效果
自定义CSS与增加导航按钮
官方有提供比较详细的API,与及How to Use .这里我们不介如何使用了,您可以参看官方网站。下面我们看一段示例代码:

var selectedid = $("select[name$=DdlSearchProfile]").val(); 
var selectedtxt = $("select[name$=DdlSearchProfile] :selected'").text(); 
$("#editsp").fancybox({ 
ajax: { 
type: "POST", 
data: "selectedid=" + selectedid + "&selectedtxt=" + selectedtxt, 
cache: false 
}, 
autoDimensions: false, 
width: 300, 
height: 125, 
scrolling: 'no', 
//onStart: OnStartCheck, 
onComplete: OnshowtxtForEdit, 
titleShow: false, 
enableKeyboardNavigation: false 
});

这里我们使用它的以ajax方式去load一个page.并传值。我们可以Server端取到相应的Data,如上面的Id,text. OnComplete是一个CallBack,熟悉JQuery应该知道。它提供了好几个CallBack,您可以对应具体的场景调用。

        我们接下面主要是解决一个在IE中Close按钮图片显示不出的问题。我们看到它的CSS使用的了AlphaImageLoader Filter,关于如何使用这个Filter你可以参考这篇POST

一种方法是使用绝对Path,如:
1: AlphaImageLoader(src='http://yourdomain.com/js/fancybox/ fancy_loading.png' ..

另一种方法是使用Javascript,打开jquery.fancybox-1.3.1.css,提到#fancybox-loading.fancybox-ie div 处替换成以下代码:

.fancybox-ie #fancybox-close { background: transparent; behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var h=t[i].href.split('?')[0];if(h&&/polaroid_gallery\\.css$/.test(h)){return h.replace('polaroid_gallery.css','');}} return '';})() +"Scripts/fancybox/fancy_close.png',sizingMethod='scale')"); }
看上去有点儿funy, 在css使用Javascript. 

 然后就可以了,这里我们使用的是IE 8.0.7600.16385。fancybox 1.31 的版本。最好的解决方案是实现自定义的样式,也不会有这样的问题。后面我们发面这个网站也在使用fancybox。可以参考:

http://www.microsoft.com/express/windows/

希望这篇POST对您开发有帮助。

Javascript 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
angularJS深拷贝详解
Mar 23 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
详解Vue router路由
Nov 20 Vue.js
客户端 使用XML DOM加载json数据的方法
Sep 28 #Javascript
jquery选择器(常用选择器说明)
Sep 28 #Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
You might like
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
layui获取多选框中的值方法
2018/08/15 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
Django框架模板介绍
2019/01/15 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python使用smtplib模块发送邮件
2020/12/17 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
二年级体育教学反思
2014/01/15 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
优秀纪检干部材料
2014/08/27 职场文书
情感电台广播稿
2015/08/18 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript