Ikeda->Weblog();

Ikedaの徒然雑記。

[TIPS] ウィンドウリサイズに背景サイズを追随させる

| 1件のコメント

[] ウィンドウリサイズに背景サイズを追随させる再びLightboxネタ。

ユーザより新たな要望が来ました。

ウィンドウをリサイズすると背景の黒の部分がついてこない(リサイズされない)

コードを見てみると、確かにWindowのresizeイベントを拾っていないようです。
てことで、さくっとresizeのイベントハンドラを追加してみます。

lightbox.js の627行目付近、Lightbox クラスの定義の最後にハンドラを加えます。
処理内容は start()メソッドから抜き出してきました(笑

621 end: function() {
622 this.disableKeyboardNav();
623 Element.hide('lightbox');
624 new Effect.Fade('overlay', { duration: overlayDuration});
625 showSelectBoxes();
626 showFlash();
627 }
628 }
629


この部分に、、

621 end: function() {
622 this.disableKeyboardNav();
623 Element.hide('lightbox');
624 new Effect.Fade('overlay', { duration: overlayDuration});
625 showSelectBoxes();
626 showFlash();
627 },
628
629 //@(#)2008/01/24 T.Ikeda
630 onResizeWindow: function() {
631 var arrayPageSize = getPageSize();
632
633 Element.setWidth('overlay', arrayPageSize[0]);
634 Element.setHeight('overlay', arrayPageSize[1]);
635
636 var arrayPageScroll = getPageScroll();
637 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
638 var lightboxLeft = arrayPageScroll[0];
639 Element.setTop('lightbox', lightboxTop);
640 Element.setLeft('lightbox', lightboxLeft);

641 }
642 }
643


こう追記しました。

そしてlightbox.jsの一番最後でイベントハンドラを登録します。

Event.observe(window, 'load', initLightbox, false);

loadイベントハンドラを登録している部分の直後に

Event.observe(window, 'load', initLightbox, false);
Event.observe(window, 'resize', function() { myLightbox.onResizeWindow(); }, false);


resizeイベントハンドラを登録します。

これでウィンドウのresizeイベントに反応して、背景のoverlayエレメントのサイズと、画像の表示部分である lightbox エレメントの位置が更新されるようになります。
お試しあれ^^

1件のコメント

  1. スミマセン・・・
    わからねぇwwwwww

コメントを残す