FancyboxというjQueryのプラグインで簡単にかっこよく別窓を表示できるプラグインがある。
ムービーや画像、さらにはインラインフレームにして別のページを表示と、
ページの中でまるで別窓を開くように見せることができる素晴らしいプラグインだ。
しかし、このプラグイン、スクロールしたときの挙動が完成していない。
オプションで窓を真ん中に持ってくるというオプションが一応ついてるっちゃついてる。
centerOnScrollというオプションをtrueにすれば、jQueryのanimation効果を使って無理やり真ん中には持ってこれる。
だがしかし、スクロールするたびにｳﾆｮﾝｳﾆｮﾝと真ん中に動いてくるのである。
漢だったら黙って真ん中で固定されてろ！ってことで、
CSSで、fancyboxにpostion: 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 ]; },

1 2 3 4 5 6 7 8

_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 ];

1 2 3 4 5 6 7 8

_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 2 3 4

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

↓
１行追加します。
↓
After:

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

1 2 3 4 5

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

3.CSSの変更

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

#fancybox-wrap { position: absolute;

1 2	#fancybox-wrap { position: absolute;

↓
After:

#fancybox-wrap { position: fixed;

1 2	#fancybox-wrap { position: fixed;

更に更に！！！
IE6の対応のために以下を適当なところに付け加えます。

* html #fancybox-wrap { /* IE6 */ position: absolute; }

1 2 3

* html #fancybox-wrap { /* IE6 */ position: absolute; }

これで任務完了！
これで、おそらく、クリックされれば固定窓で表示されるはず。
もちろん、IE6でもposition:fixedで表示されてるはず・・・！
（ただ、２回目以降の表示はうまくいかないというバグはあったりしますが。。）
一応カスタマイズしたjavascriptファイルをおいておきます。

www42.tok2.com

404 Not Found

http://www42.tok2.com/home/mogmet/blog/jquery.fancybox-1.3.4.custom.js