Jqueryプラグインfancybox 1.3.1 IEにおける画像表示の問題

JQueryのポップアップウィンドウプラグインもたくさんあります.例えば、Lightbox...これは優れたPlugin-Fancyboxを紹介します.主な特徴は次のとおりです.

HTML,swf,Iframe,ajaxリクエスト

を表示

マウススクロール表示画像

をサポート

はシャドウをサポートし、拡大効果

カスタムCSSと追加ナビゲーションボタン

公式には比較的詳細なAPI、およびHow to Useが提供されている.ここではどのように使うかは説明しませんが、公式サイトを参照してください.サンプルコードを見てみましょう.

   1:      var selectedid = $("select[name$=DdlSearchProfile]").val();

   2:              var selectedtxt = $("select[name$=DdlSearchProfile] :selected'").text();

   3:   

   4:              $("#editsp").fancybox({

   5:                  ajax: {

   6:                      type: "POST",

   7:                      data: "selectedid=" + selectedid + "&selectedtxt=" + selectedtxt,

   8:                      cache: false

   9:                  },

  10:                  autoDimensions: false,

  11:                  width: 300,

  12:                  height: 125,

  13:                  scrolling: 'no',

  14:                  //onStart: OnStartCheck,

  15:                  onComplete: OnshowtxtForEdit,

  16:                  titleShow: false,

  17:                  enableKeyboardNavigation: false

  18:              });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
ここではajax方式でpageをloadします.併伝値上記のId,textのようなサーバ側から対応するデータを取り出すことができます.OnCompleteはCallBackで、JQueryに詳しいのは知っているはずです.いくつかのCallBackが用意されており、特定のシーン呼び出しに対応できます.
次に、主にIEでCloseボタン画像が表示されない問題を解決します.CSSがAlphaImageLoader Filterを使用しているのを見ましたが、このFilterの使用方法についてはこのPOSTを参照してください.
1つの方法は、次のような絶対的なPathを使用することです.

   1:  AlphaImageLoader(src='http://yourdomain.com/js/fancybox/ fancy_loading.png' ..

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
もう1つの方法は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')"); }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
ちょっとfunyに見えますが、cssでJavascriptを使います.
それからいいです.ここではIE 8.0.7600.16385を使っています.fancybox 1.31のバージョン.最良の解決策は、カスタムスタイルを実現することであり、このような問題はありません.後でこのサイトにもfancyboxを使っています.以下を参照してください.
http://www.microsoft.com/express/windows/
このPOSTがあなたの開発に役立つことを望んでいます.
作者:Petter Liu出典:http://www.cnblogs.com/wintersun/本文の著作権は作者とブログ園に共有され、転載を歓迎するが、著者の同意を得ずにこの声明を保留し、文章のページの明らかな位置で原文の接続を与えなければならない.そうしないと、法律責任を追及する権利を保留する.この記事は、私の独立したブログにも掲載されています.Petter Liu Blog.