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

主要特色有：

显示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对您开发有帮助。

赞 (0)

相关推荐

  • 使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

    使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

    模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式.通过模态窗口,可以提高网站的可用性.正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuery fancybox插件来创建一个漂亮的模态窗体,提交表单的数据在服务器端实现Ajax调用.你可以在你的邮件里收到用户发送的反馈消息 html代码 header部分主要的JS文件如下引入jquery代码和fancybox代码 复制代码 代码如下: <script type="text/java

  • 使用JQuery FancyBox插件实现图片展示特效

    使用JQuery FancyBox插件实现图片展示特效

    FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具. jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的. Demo effect(image gallery): Sample code: <link href="~/Content/jquery.fancybox.css" rel="styl

  • jquery fancybox ie6不显示关闭按钮的解决办法

    解决办法: 打开jquery.fancybox-1.3.4.css 注释掉这行就行了: 复制代码 代码如下: .fancybox-ie6 #fancybox-close   {      background: transparent;      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale');   }

  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示    源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse

  • JQuery插件fancybox无法在弹出层使用左右键的解决办法

    JQuery插件fancybox解决无法在弹出层使用左右键的问题.无法使用的原因在于,插件接管了左右键,用于多张图片的翻页. 如果不需要这个功能,可以在fancybox插件中,禁止接管就好了. 具体在插件下的js文件 jquery.fancybox-1.3.4.js 中的598行,注释掉就好了. // _set_navigation();

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

    主要特色有: 显示HTML,swf,Iframe,ajax请求 支持鼠标滚动显示图片 支持阴影,放大效果 自定义CSS与增加导航按钮 官方有提供比较详细的API,与及How to Use .这里我们不介如何使用了,您可以参看官方网站.下面我们看一段示例代码: 复制代码 代码如下: var selectedid = $("select[name$=DdlSearchProfile]").val(); var selectedtxt = $("select[name$=DdlSe

  • 基于jQuery Circlr插件实现产品图片360度旋转

    基于jQuery Circlr插件实现产品图片360度旋转

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr

  • 基于jquery fly插件实现加入购物车抛物线动画效果

    基于jquery fly插件实现加入购物车抛物线动画效果

    先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

  • 基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: <div class="dowebok"> <h2> 1.默认</h2> <div class="inner"> <span id="tip1" data-tipso

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

  • 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器

    先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码 代码如下: <script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script> 然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了. 复制代码 代码如下: <asp:Hid

  • JQuery boxy插件在IE中边角图片不显示问题的解决

    JQuery boxy插件在IE中边角图片不显示问题的解决

    JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下: 发现这样修改后并没有作用,运行后效果仍然如下: 有效的解决方法 将上面css截图的下半部分注释掉,如

  • jQuery幻灯片插件owlcarousel参数说明中文文档

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及以上版本. Owl Carousel 使用方法: 新建一个HTML文件 1.在HTML文件中引入Owl Carousel必须文件 <link href=

  • 基于jQuery日历插件制作日历

    基于jQuery日历插件制作日历

    来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <div class="container"> <input type="text

随机推荐