ポップアップを配置する場所に関するLightbox 2のロジックは何ですか?
Firefox または Chrome を使用すると、別のページの別の場所に表示されるようです。一貫性を保つために、すべてのページで同じ高さに表示する設定はありますか?
ポジショニングを決定するために使用している CSS またはロジックは何ですか?
ポップアップを配置する場所に関するLightbox 2のロジックは何ですか?
Firefox または Chrome を使用すると、別のページの別の場所に表示されるようです。一貫性を保つために、すべてのページで同じ高さに表示する設定はありますか?
ポジショニングを決定するために使用している CSS またはロジックは何ですか?
さまざまな場所でどのように表示されますか、どのような動作が望まれますか、サンプル ページを教えていただけますか?
スクリプト自体がポップアップの上部の位置を計算する方法は次のとおりです (ライトボックス v2.04、zip ダウンロード、js/lightbox.js、229 行目以降):
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
スクリプトはPrototype の document.viewport objectを使用するため、スクリプトは次のように現在のスクロール位置の 10% 内側にポップアップを配置します。
------- page start
|
|
|
|
|
------- scroll position top
|
------- start of lightbox popup
|
|
|
|
|
|
|
|
------ scroll position bottom
|
|
|
|
------ page end
lightbox.js
次のように10から100で除算を調整する231行目:
document.viewport.getHeight() / 100
サンプルコード:
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 100); //
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
これは非常に古いスレッドであることは知っていますが、それでも Google の検索結果のトップ 5 に入っています。IE/FF では良い結果が得られますが、Chrome ではそうではありません。それらをすべて一貫させるには、
js/lightbox.js の 231 行目
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
に変更されました
var lightboxTop = arrayPageScroll[1] + (100);
正確には要求されたものではありませんが、ページは一貫しています。
http://www.lokeshdhakar.com/forums/discussion/5494/fixed-display-position-problems-with-firefox-but-not-ie-on-tall-webpages/p1から取得した情報
Flowplayerを試すことができます:
http://flowplayer.org/tools/demos/index.html
オーバーレイの位置とサイズは、CSSファイルを介して任意の場所に設定できます。
#lightbox{
position: absolute;
top: 100px !important; /*I foxed it 100px from the top, you could fix it as much pixels as you wish*/
}