2006-01-07 Sat

Lightbox JS|カスタマイズ後のセンタリング

未だ IE で表示させることができない当サイトの Lightbox ですが、いじくり回しているうちに微妙にセンターからずれていることが気になって仕方がありません。

というわけで、またまた知識も無いのに修正したのでメモ。

確認は Safari、Mac 版の FireFox、Opera で行っています。が、Opera では微妙ですがずれていますね。おまけに AdSense も飛び出して表示されたように見えます(笑)。興味のある方は、一度 Opera で見てください。思わずクリックしたくなりますよ(笑)。

確認は Safari、Mac 版の FireFox、Opera で行っています。が、Opera では微妙ですがずれていますね。おまけに AdSense も飛び出して表示されたように見えます(笑)。興味のある方は、一度 Opera で見てください。思わずクリックしたくなりますよ(笑)。

今回は「lightbox.js」と「lightbox.css」の調整が必要でした。まず、lightbox.js の以下を探します。

objLightbox.style.left = (((arrayPageSize[0] - 40 - imgPreload.width) / 2) + 'px');

ここで、描画する画像の横位置を決めていると思います。「arrayPageSize[0]」がウィンドウの幅、「imgPreload.width)」が表示する画像の幅だと思います。で、わからなかったのだ「40」です。ここはどうやら「lightbox.css」の「#lightbox」に「padding」の指定に依存します。当サイトは「#lightbox」の左右の padding を「15px」とっているので、「30」とすると、かなり真ん中に配置されました。後は微調整して、現在は

objLightbox.style.left = (((arrayPageSize[0] - 33 - imgPreload.width) / 2) + 'px');

としています。

あと、「loading.gif」の位置が、ほとんどのサイトで若干右寄りになっているのですが、どうも「loading.gif」の width をきちんと取得できていない気がしたので、

objLoadingImage.style.left = (((arrayPageSize[0] - 40 - objLoadingImage.width) / 2) + 'px');

「objLoadingImage.width」を直接 loading.gif の width である「126」に置き換えました。こんな感じです。

objLoadingImage.style.left = (((arrayPageSize[0] - 33 - 126) / 2) + 'px');

これでめでたく、大体センタリングされました。

Javascript はまったくわからないままいじくったのですが、考え方は間違っていないと思います。どうだろ(笑)。とにかく、「arrayPageSize[0]」の次の数値を「X」とした場合、「#lightbox」の padding の関係は、

X = [padding-right の値] + [padding-left の値]

で、後は主観でプラスマイナス 3px まで。といった感じでしょう。多分。

関連記事

2006-01-07 Sat / Category - Web

このページの先頭に戻る

Copyright 2006 - Heartfield