再び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 エレメントの位置が更新されるようになります。
お試しあれ^^