見せ方としては、サムネイル画像をクリックするとページが変わらず、そのまま拡大画像が見られるというもの。写真のバックは今風に薄い黒色で覆われる。

サンプルを作ってみたので、下のサムネイル画像をクリックしてみて欲しい。Macで作っているので、Windowsなどで表示が崩れるかも知れないが、どうだろう？

意図通り表示できていればいいのだが。

Blogへの仕込み方はこの「lightbox.js - Web2.0ライクな画像サムネイル生成 — OpenStratus Archive」というエントリを見ていただければ、迷うことはないと思う。

参考サイトにも書かれているように、Lightbox JSから必要な部品をダウンロードしてきてサーバーにアップ。このサイトの場合は.Macにアップした。

それからiBlogのEntrypageのHead部分にjsファイルを読み込ませるための行[＜script type="text/javascript" src="lightbox.js">]を追加して、やはりサーバーにアップした写真にlightbox用のマークアップをしておく。

＜a href="bigimage" alt="image" rel="lightbox"＞＜img src="smalimage" alt="image" title="クリックすると画像を拡大します"/＞＜/a＞

ここでは上のようにしたが、こんな感じの定型文をクリップボードユーティリティに登録しておけば、ラクそうだ。（＜＞を大文字にしてあります）

まあ、ここよりも上記サイトにしっかりとした手順が出ているので、それを見ながら進めれば大丈夫だろう。

と思ってプレビューしてみたのだが、Blogpageでは普通の拡大画像になってしまうようである。Entrypageの方は大丈夫だった。CSSも含めて、ちょっと切ったり貼ったりしたので、記述の仕方がおかしいのかも知れない。

時間が出来たら、もう少しいろいろ検証してみようと思う。

[2006.06.16追記]

Lightbox JSのバージョンを2.0にあげた。写真を見せるムーブが変わったのと、複数枚の写真がある場合にマウスを写真に乗せると「prev」と「next」を表示して、同じ画面で写真を移動できるようになった。

[2006.06.21追記]

結局、またバージョンを古いものに戻した。どうも動作が緩慢な気がしたのと、ビヨーンと伸びていくムーブも見飽きると、ただジャマな感じがしたから。

[2006.06.23追記]

大きい方のtitle属性にコメントを入れると表示されるんだねえ。下のような感じ。