最近の流行？のlightbox系UIを導入してみた。

wordpressのプラグインとして「ightbox 2 WordPress Plugin」が定番っぽい感じだけど、ライブラリに「prototype.js」が使われているのが嫌で、「jquery.js」を使っている「jQuery lightBox plugin」にした。
（このブログでは、jquery.jsをJavascriptライブラリとして使っていこうと思っているので、prototype.jsを避けた。一応ちょっとした工夫で共存はできるがこれだけの為にprototype.jsは重い。）

以下で説明する方法で設置すると、簡単にページ中の画像をスライド表示することができる。
簡単に設置できるし、軽快に動く、いいライブラリだ。

jQuery lightBox pluginの使い方

wordpressのプラグインではないので、pluginフォルダには入れない。HTMLからアクセスできる場所に置く。

１．JSを読み込む。

<script type="text/javascript" src="http://www.cubdesign.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.cubdesign.com/js/jquery.lightbox-0.5.js"></script>

２．CSSを読み込む。

<link rel="stylesheet" type="text/css" href="http://www.cubdesign.com/css/jquery.lightbox-0.5.css" media="screen" />

３．スクリプトを追加する。

<script type="text/javascript">

$(function(){

$('a[@rel*=lightbox]').lightBox();

});

</script>

４．lightbox機能を使いたいaタグにrel属性を設定する。

<a href="image1.jpg" rel="lightbox"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

<a href="image2.jpg" rel="lightbox"><img src="thumb_image2.jpg" width="72" height="72" alt="" /></a>

<a href="image3.jpg" rel="lightbox"><img src="thumb_image3.jpg" width="72" height="72" alt="" /></a>

以下サンプル