1

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

関連記事

コメントを書く

トラックバック (1)

  • […] 火曜日  2012 年 3 月 06 日    前回スクリーンキャプチャを導入した際にキャプチャ画像を貼り付けたけどリンク画像がショボいなと思い、画像に Lightbox 効果をつけるプラグインを入れてみた。  早速ググって見つけたのが「 Slimbox Plugin 」。 ダウンロードしてアップ。  んで実験。  イイ感じ! 後でココを参考に「 slimbox.php 」の 19 行目から 22 行目までのコメントアウトを解除。 これで「 rel= ” lightbox ”」をつけなくても OK に。 […]

    WordPressでLightbox : A DAY IN THE LIFE

トラックバック URL