2010/03/03

lightbox.js ライトボックスの画像位置について

まずはlightbox
http://www.lokeshdhakar.com/projects/lightbox2/

target="_blank"で画像を開くよりも、javascriptでページにオーバーレイして
美しく拡大画像を表示してくれる。なんならtitle=""でキャプションも。

静的な箇所のデザインはcssで決められているが、画像サイズによりウインドウの任意の位置にレイアウトしている様な動的なレイアウトは、javascriptで画像サイズを取得してオーバレイしている箇所にスタイル記述している。

デフォルトの表示位置はユーザビリティ的に使いにくいので、10pxほど上げると良い感じ。なはず。
という事でjavascriptのファイルからこの数値を導きだしている呪文をさがす。

『lightboxTop』が表示位置上端のy座標なので、この記述がある近辺を見るとコレ。
lightbox.jsの画像表示位置に関する行は271行目
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
ん〜感でいくと
document.viewport.getHeight()ブラウザ表示エリアの高さを取得してるっぽいので
lightboxTopの初期値は、ブラウザ表示エリアの高さ(Y軸)の1/10の座標?

簡単にコレの半分で自分が求める高さなのでこうする
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 20);

これで書き換え、アップロードしてチェック!
見やすくなった。