画像をクリックして大きくしたとき、オーバーフローで浮き上がってくる動作で表示してくれる WordPress プラグインをインストールしてみました。
まずはどんなものがあるのか調査。以下のサイトがよくまとまってました。
→ lightbox 風に画像を表示できるプラグインいろいろ
わたしが重視したのは、軽いこと、そして「 rel= ” lightbox ”」タグの自動付与です。画像にいちいち「 rel= ” lightbox ”」なんて足してられません。
そこであさこんが選んだのは「 Slimbox Plugin 」。 Lightbox の動作を軽くしたのが、 Slimbox で、それを WordPress のプラグイン化したもののよう。
「 Slimbox Plugin 」はそのままでは「 rel= ” lightbox ”」を自動付与してくれません。でも、こんなサイトをみつけました。
→ WordPress2.6 で複数画像をスライドショー的に見せる lightbox plugin 「 Slimbox 」
ここによると、
「 lighbox.php 」をエディタで開きます。
で、 21 行目から 24 行目あたりにあるコメントアウトの ‘ // ’ を削除
すると、自動で「 rel= ” lightbox ”」を追加してくれるようです。
でも最新の Slimbox Plugin は 1.3 （ 2009 年 4 月 30 日現在）は、「 slimbox.php 」の 19 行目から 22 行目までのコメントアウトを解除すると見事に lightbox 効果が得られました。
昔の記事でもきちんと動作してる。
→導入例
＊追記＊
なぜか WordPress に移行してから moblog したものに lightbox アクションがつかない不具合を発見。いろいろ調査した結果、 携帯から投稿するのにわたしは「 MobG 」を利用しているのですが、これで投稿すると a タグの中身がシングルコーテーション（’）になっているのが原因でした。原因の箇所を書き換えたら OK でした。
slimbox.php の 20 行目の「”」を削除しました。
前：
return preg_replace(‘/<a(.*?)href=(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)>/i’,
’<a$1href=$2.$3" $4 rel="lightbox[roadtrip]">’, $content);後：
return preg_replace(‘/<a(.*?)href=(.*?).(jpg|jpeg|png|gif|bmp|ico)(.*?)>/i’,
’<a$1href=$2.$3" $4 rel="lightbox[roadtrip]">’, $content);他の画像でも問題なく動いています。
現在は Easy FancyBox というプラグインを使っています。 lightbox 的効果を与える部分のコードが jQuery 書かれているので読み込むライブラリを節約できます。
