SexyLightBox + WordPress Plugin

画像をクリックするとみょーんと拡大表示される面白い代物。

使い方は、SexyLightBoxからソース一式をダウンロードして任意の場所に置き、ヘッダー部分に以下のようなコードを書けばOK。
jsやcssを以下のように指定をする場合、imagesdirも忘れずに設定する。

<script src="http://example.com/mootools.js" type="text/javascript"></script>
<script src="http://example.com/sexylightbox.js" type="text/javascript"></script>
<script type="text/javascript"><!--
    window.addEvent('domready', function() {
    new SexyLightBox( {imagesdir:'http://example.com/sexyimages'} );
});
// --></script>

これをWordPressで使おうと思ったら、各所に手動でコードを埋め込む必要が。
なんだか非効率かつ非生産的だなーってことでPluginを作ってみた。
wp-sexylightbox plugin.
wp-sexylightbox.zip

使い方：
上のzipをダウンロードして解凍する。
解凍したフォルダを wp-content/plugin/ に配置し、ダッシュボードでPluginを有効化。
あとは、以下のような感じに class=”sexylightbox” と追記する。

<a class="sexylightbox" title="sexy!!" href="http://example.com/a.jpg">
<img src="http://example.com/a.jpg" alt="sexylightbox" width="500" height="393" />
</a>

ダッシュボードの設定画面でパラメータの調整も可能。

WordPressのPluginの仕組みが意外と面白かった。
— 更新log —

2008 12.20 13:49 テーマ設定とコンフリクトしてたので修正。
2008.09.04 23:55 設定画面のスタイルを標準に準拠させた。
2008.09.03 22:26 画像がずれるのは、一部WordPressテーマのCSSのせいっぽい。
2008.09.03 01:44 IEでとりあえず動作確認。なんだか画像がずれるナー。
2008.09.02 11:05 IEでうまく動作せず…完全にスルーしてた(´-｀) そのうち。

関連エントリー:

WordPress Plugin の管理ページで指定の JavaScript と CSSを読み込む

WordPress プラグインを公開する手順

unix timestamp + time zone.