トイレのうず

WordPressでLightbox的効果をつける【Slimbox Plugin】

当記事はアフィリエイト広告を掲載しています。

画像をクリックして大きくしたとき、オーバーフローで浮き上がってくる動作で表示してくれる 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 書かれているので読み込むライブラリを節約できます。 

関連記事

WordPress 外部リンクを表示しれくれるプラグイン【 Link Indication Plugin 】
WordPress
thumbnail
WordPress パンくずリストをつけてみた
WordPress
thumbnail
WordPress 新規投稿時だけに Ping を打ってくれるプラグイン【 Smart Update Pinger 】
WordPress
thumbnail
WordPress 、 Executable PHP widget と Compact Archives で月別アーカイブをすっきり
WordPress
thumbnail
WordPress for iOS が「同期できませんでした」というエラーを吐く
WordPressiPhone
WordPress for iOS エラー「同期できませんでした」
WordPress の Ping 送信最適化プラグインまとめ 〜 WordPress で一番に入れておきたいプラグイン〜
WordPress
thumbnail