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 11 Javascript
jquery indexOf使用方法
Aug 19 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
客户端 使用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更快的提供文件下载的代码
2012/06/13 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
详解flask入门模板引擎
2018/07/18 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python实现超级玛丽游戏
2020/03/18 Python
numpy库reshape用法详解
2020/04/19 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
综合素质的自我鉴定
2013/10/07 职场文书
求职简历的自我评价
2014/01/31 职场文书
日化店促销方案
2014/03/26 职场文书
2015入党自荐书范文
2015/03/05 职场文书
行政经理岗位职责
2015/04/15 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
python APScheduler执行定时任务介绍
2022/04/19 Python