jQueryでもprototypeでもlightboxはもうすでに標準みたいな感じでいろんなサイトで見かけますが、jquery-lightpopなるものがあってちょっと驚き。lightboxと違うのは動画をスムーズにクローズアップできるっていうところでしょうか。
　結構導入も簡単でした。

ダウンロードと設定

  まずはjQueryソースをダウンロード。最新版は現時点でver.0.8.5です。[Down Load]
jquery.lightpop-0.8.5.zipというzipファイルがダウンロードされるので、適当な場所でzip解凍します。ファイルがバラバラになると何なので適当なjquery-lightpopとかいうフォルダーにまとめておきます。
　以下のファイルが解凍されてこんな感じになるはずです。

jquery-lightpop[D]
|-- images[D]
|   |-- icon-dailymotion.png
|   |-- icon-googlevideo.png
|   |-- icon-html.png
|   |-- icon-ifilm.png
|   |-- icon-image.png
|   |-- icon-liveleak.png
|   |-- icon-metacafe.png
|   |-- icon-nicovideo.png
|   |-- icon-superdeluxe.png
|   |-- icon-video.png
|   |-- icon-youtube.png
|   |-- lightpop-blank.gif
|   |-- lightpop-border-l.gif
|   |-- lightpop-border-r.gif
|   |-- lightpop-box.gif
|   |-- lightpop-btn-close.gif
|   |-- lightpop-btn-next.gif
|   `-- lightpop-btn-prev.gif
|-- jquery.lightpop-0.8.5.1.min.js
`-- jquery.lightpop-0.8.5.1.js

　呼び出すファイルはjquery.lightpop-0.8.5.1.min.jsか、jquery.lightpop-0.8.5.1.jsでどっちでも同じです。現時点のバージョンが0.8.5.1なのですが、バージョンが違ったりしたらその都度ファイル名を変えてください。そしてサーバーの適当な場所にアップしておきます。
　それから、こんな感じでヘッダに読み込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="所定のパス/jquery-lightpop/jquery.lightpop-0.8.5.1.js"></script>

　jQueryのライブラリー本体を先に読んでおかないとlightpopは機能しないのでご注意。
　で、画像や動画のリンクにlightpop印をつけるために以下を追加。

<script type="text/javascript">
<!--
$(function() {
 // <a href="http://hogehoge/" rel="lightbox"> な要素
 $('a[rel*=lightbox]').lightpop();
 // <a href="http://hogehoge/" class="lightpop"> な要素
 $('a.lightpop').lightpop();
 // 画像ファイルへのリンク
 $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop();
 // YouTube へのリンク
 $('a[href*=.youtube.com/watch]').lightpop();
});
// -->
</script>

　私はだいたいclass='lightpop'でやっています。その他もどれでも同様に機能します。

close[X]などの画像が出ない

　開いたAjaxちっくなウィンドウの右下にはCloseアイコンが出るはずなんですが、パスが合っていなくて出てこない場合がありますので、ちょっと改造。（特に私はMovable Typeを使っているのでパブリッシングの階層が違うと機能しなくなるかもしれないので、パスの変更しておきます。）
　読み込んでいるjsファイル（jquery.lightpop-0.8.5.1.js）を適当なエディタで開いて23行目辺りの

image_path  = image_path  || 'images/';

という部分を

image_path  = image_path  || '<適当なパス>images/';

に変更します。これでOK。

動画とかのリンクとかも

　自動的にYoutubeのアイコン出てきました。自鯖にある動画なんかもこういう見せ方はリッチに見えるかも。アンカーにサムネイル挿んだ方がより効果的ではあると思いますが。
big wave surf