Wordpress用lightboxプラグイン作ってみた

Home > WordPress > WordPress用lightboxプラグイン作ってみた

2月 26

WordPress用lightboxプラグイン作ってみた

ツール WordPress コメントする

もうちょっと前に導入した『Litebox plugin for WordPress』なんだけど、
このブログのテーマとは相性が悪いらしく、うまく動かなかった部分があったのに気付いた。

そして新しいプラグインを入れようといろいろと探して『Slimbox 2』なるものに出会う。
なんだけど、これはプラグインじゃなくてJavascriptって言うのだった。
ぶっちゃけ導入が面倒だし、英語だし困った。
んで導入するには『jQuery.js』って言うのも必要らしく、さらに大変。

そんなこんなで勢い余って全部まとめたプラグインにしてみた。
pluginsフォルダにぶち込んで有効化したら使えるはず。
自分の所では使えていると思う。
諸事情でいきなりバージョン1.3なのはご愛敬。
アップデート予定は無いよ。
各人で『Slimbox2.js』を上書きアップデートしてね。

Download

プラグインをダウンロードする

使い方

pluginsフォルダにアップロードして有効化するだけで使えます。

画像をうにょーんと表示するには下のように書く。

<a href="http://www.hosimitu.com/img/2009/05/p1000952.jpg"  rel="lightbox" title="予想外の照り具合"rel="lightbox[1079]" />
<img src="http://www.hosimitu.com/img/2009/05/p1000952.jpg" alt="予想外の照り具合" />
</a>

『a』タグの中に『rel=”lightbox”』を書けばうにょーん対象になるのですが、
デフォルトの機能で『rel=”lightbox”』を自動で追加するようにしてあるので有効化するだけでOK。
『a』タグの中に『title=”～～～”』って書けば画像開いたときの説明が入る。

表示サンプル

こちらの記事も画像の表示に関して参考に。

注意

WordPressの環境によっては動かないかも知れない。
lightboxのプラグインは基本的にjQueryっていうスクリプトが使われてるんだけど、
動かない時はhead部分でまだ読み込まれていないかも知れない。
その場合は『slimbox.php』の19行目辺りのslimbox2.jsの上に以下を追加してpluginsフォルダにアップロードしてね。

<script src=\"http://www.google.com/jsapi\"></script>
<script>
  google.load(\"jquery\", \"1\");
</script>

　
　
2009.12.22　追記
小さなバージョンアップをした。
特にアップデートをしなくても良い小さなもの。『rel=”lightbox”』を自動挿入する部分を綺麗にしただけ。
2009.6.26　追記
他の人が作った『slimbox2』のプラグインを発見。
『WP-Slimbox2 Plugin』
2009.2.26　追記
『slimbox1.6.4』バージョンのプラグインがあったｗ
『Slimbox WordPress Plugin』

投稿日 2009年2月26日　 written by hosimitu

この記事へのトラックバックURL

コメントする