画像をクリックして大きくしたとき、オーバーフローで浮き上がってくる動作で表示してくれる 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);

他の画像でも問題なく動いています。

タグ：,

関連する記事