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
« 古い記事
Lightbox JS｜かっこいい画像表示
新しい記事 »
Lightbox JS バージョンアップ
