fancybox1.3.1 Jquery-based plug-in has image display problem in IE

fancybox1.3.1 Jquery-based plug-in has image display problem in IE_jquery

WBOY

Release： 2016-05-16 18:19:08

Original

1070 people have browsed it

The main features are:

Display HTML, swf, Iframe, ajax requests
Support mouse scrolling to display pictures
Support shadow, magnification effect
Customize CSS and add navigation buttons
Officially available Provide a more detailed API, and How to Use. We won’t explain how to use it here, you can refer to the official website. Let’s look at a sample code below:

Copy code The code is as follows:

 
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 
}); 

Here we use it to load a page in ajax mode and pass the value. We can get the corresponding Data on the server side, such as the Id and text above. OnComplete is a CallBack, which you should know if you are familiar with JQuery. It provides several CallBacks that you can call corresponding to specific scenarios.

We will mainly solve the problem of the Close button image not being displayed in IE. We see that its CSS uses AlphaImageLoader Filter. For how to use this Filter, you can refer to this POST

One method is to use absolute Path, such as:
1: AlphaImageLoader(src='http://yourdomain.com/js/fancybox/ fancy_loading.png' ..

Another The method is to use Javascript, open jquery.fancybox-1.3.1.css, and replace the #fancybox-loading.fancybox-ie div with the following code:

.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;iIt looks a bit fun, use Javascript in css.

Then it’s ok, here we are using IE 8.0.7600.16385. The best solution is to implement custom styles. , there will be no such problem. Later we will show that this website also uses fancybox. You can refer to:

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

I hope this POST will be helpful to your development.