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 相关文章推荐
Cookie 小记
Apr 01 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
js子页面获取父页面数据示例
May 15 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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实现留言板功能(会话控制)
2017/05/23 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
jQuery中库的引用方法
2018/01/06 jQuery
Vue的轮播图组件实现方法
2018/03/03 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
什么是封装
2013/03/26 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
学习十八大宣传标语
2014/10/09 职场文书
公司租车协议书
2015/01/29 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL