2006-01-05 Thu

Lightbox JS｜かっこいい画像表示

Nucleus ユーザに朗報です。
「Nucleus(JP)フォーラム :: Lightbox.JSについて」が元で、Andy さんがプラグインを作成してくれました。導入方法や、その他のプラグインとの調整などは
「我がサイトにLightbox JSが！」
で詳しく解説してくれています。いやいや、ほんとにすごい人たちです。

残念ながら当サイトは IE で表示されていないもよう。寝ころびながらの作業だからミスったのかな（笑）。あー腰痛い。

はてなブクマで人気の「Lightbox JS」を導入しました。導入に当たっては「Web2.0ライクな画像サムネイル生成」を参考にしました。ありがとうございます。

当サイトでは、Javascript を利用したサイトデザインを極力避けてきたのですが*1、これはかっこいいだけでなく、実用度も非常に高いので、導入に踏み切りました。

導入方法はほんとに簡単なのですが、配付されているスタイルシートを修正したのでメモ。

修正した理由ですが、二つあります。スターハックの使用と、予期しない余白の発生です。後者はおそらく、当サイトのスタイルシートで img 要素にいろいろ指定しているのが原因です。いろいろ上書き指定してみたのですが、どうも良くわかりません。

#lightbox {
padding: 15px 15px 12px 15px;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/clickToClose.png) no-repeat #000000;
background-position: 15px 5px;
border-top: 1px solid #666666;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #666666;
}

この padding の値を同じにして Safari で見ると、なぜか下の方が広くなるので調整しました。が、FireFox だとこれでおかしくなります。自分が常時使用している Safari を優先しました。また、クリックして拡大表示したとき、画像の上に「CLICK TO CLOSE」と表示するように、「#lightbox」にも背景画像を使用しました。

スターハックに関しては「使用を中止せよ」とお達しがでているので、IE 専用のスタイルシートにまるまるコピーしました。

ちょっとした注意点として、あまり大きい画像に対してこのスクリプトを有効にすると、なにが起こったか把握しにくくなります。縦の長さが大きい場合はスクロールできるのでいいですが、横幅が大きい場合、Safari では画像の左端が見れなくなる場合がありました*2。

今後はこの Lightbox JS の力を借りて、よりわかりやすい使用方法を記録していきたいと思います。

Lightbox JS