引越しました!

http://blog.mogmet.com/blog-entry-47.html

へアクセスしてください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FancyboxをIE6などでもposition:fixedで使えるようにする【jQuery】

FancyboxというjQueryのプラグインで簡単にかっこよく別窓を表示できるプラグインがある。

ムービーや画像、さらにはインラインフレームにして別のページを表示と、

ページの中でまるで別窓を開くように見せることができる素晴らしいプラグインだ。


しかし、このプラグイン、スクロールしたときの挙動が完成していない。


オプションで窓を真ん中に持ってくるというオプションが一応ついてるっちゃついてる。

centerOnScrollというオプションをtrueにすれば、jQueryのanimation効果を使って無理やり真ん中には持ってこれる。


だがしかし、スクロールするたびにウニョンウニョンと真ん中に動いてくるのである。

漢だったら黙って真ん中で固定されてろ!ってことで、

CSSで、fancyboxpostion: fixedを設定してみたのでその備忘録。



↓Click to continue.....


















CSSではposition: fixedと指定するとどこにスクロールさせても同じところに固定されているという

見せ方をすることができる。


しかしfancyboxではひとつ改造をしてあげないとそれがうまくいかないのである。

ということで下記を参考にちょっと手を加えた。

How to get Fancybox 1.3.1 to stay put!


ちなみに今回改造したfancyboxのバージョンは

Version: 1.3.4 (11/11/2010)

のものである。

つまり、jquery.fancybox-1.3.4.jsってことです。



1.jquery.fancybox-1.3.4のカスタマイズ


参考サイトをもとに673~680行目あたりを修正
Before:
_get_viewport = function() {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];
},


After:
_get_viewport = function() {
var isFixed = wrap.css('position') === 'fixed'; // add support for fixed positioning
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
currentOpts.margin,
currentOpts.margin
];




2.exFixedの適用


position: fixedというのはIE6では使えない機能である。

これをCSSとjQueryで無理やり表現してもかくかくとして不自然な表現になってしまう。

そこで、そこの部分をカバーしてくれるexFixedというプラグインを今回使う。

ダウンロードは以下より。
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js


Fancyboxではどこでこいつを使うかというと、

459-462行目あたりでexFixedを使います。

Before:
    wrap
.css(final_pos)
.fadeIn( currentOpts.transitionIn == 'none' ? 0 : currentOpts.speedIn, _finish );
},



1行追加します。


After:
    wrap
.css(final_pos)
.fadeIn( currentOpts.transitionIn == 'none' ? 0 : currentOpts.speedIn, _finish );
wrap.exFixed(); // add
},






3.CSSの変更


さらにCSSも変更せねばなりません。

Before:
#fancybox-wrap {
position: absolute;




After:
#fancybox-wrap {
position: fixed;




更に更に!!!

IE6の対応のために以下を適当なところに付け加えます。
* html #fancybox-wrap { /* IE6 */
position: absolute;
}








これで任務完了!


これで、おそらく、クリックされれば固定窓で表示されるはず。

もちろん、IE6でもposition:fixedで表示されてるはず・・・!
(ただ、2回目以降の表示はうまくいかないというバグはあったりしますが。。)

一応カスタマイズしたjavascriptファイルをおいておきます。

jquery.fancybox-1.3.4.custom.js

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

スポンサーリンク
FC2カウンター
最新記事
最新コメント
カテゴリ
アマゾンドリンク
検索フォーム
リンク
ブロとも申請フォーム

この人とブロともになる

アクセスランキング
[ジャンルランキング]
コンピュータ
2287位
アクセスランキングを見る>>

[サブジャンルランキング]
未設定
--位
アクセスランキングを見る>>
バックリンク
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。