サムネイル画像の拡大表示をする javascript ライブラリといえば、Lightbox 2 が有名ですが、これも Prototype.js + Script.aculo.us ベースです。
サイトを jQuery に移行する際には、こちらもネックになってきますね。
# 私は Lightbox JS Ver.1 を使ってたんで、問題なかったんですが 😛
で、jQuery ベースで同様に動作するものは無いか探していて、以下の2つを見つけたのでご紹介。
ThickBox 3.1
画像ファイルだけでなく、Web ページへのリンクも lightbox 風に表示してくれる。
使用するには、CSS と JS ファイルを読み込むだけ。
ただし JS ファイルは loadingAnimation.gif のパスを、CSS ファイルは macFFBgHack.png のパスを修正してやる必要があります。
で、これを今まで Lightbox JS を使っていたサイトで、コンテンツの修正なしに動作させるには JS ファイルの 14 行目を以下のように修正してやればおっけ。
tb_init('a.thickbox, area.thickbox, input.thickbox, a[@rel*=lightbox]');//pass where to apply thickbox
これで <a href="hogehoge" rel="lightbox"><img src="hogehoge.jpg" /></a> と書いていた要素にも、ThickBox のエフェクトが適用されます。
jQuery lightBox plugin
こちらは、まんま Lightbox.js 2 な動作をする jQuery 用プラグイン。
使用するには、CSS と JS ファイルを読み込むと jQuery オブジェクトで .lightbox() ってメソッドが使えるようになるので、それを呼び出すだけ。
ただし、jquery.lightbox-0.3.1.js の 28 行目 〜 31 行目に書いてある画像ファイルのパスを修正する必要があります。
imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
今まで Lightbox JS を使っていたサイトで、コンテンツの修正なしに動作させるには JS ファイル読込後、こんな風に書いておけばいいでしょう。
<script type="text/javascript">
$(function(){$('a[@rel*=lightbox]').lightBox();});
</script>
デモ
ウチのサイトでは jQuery lightBox plugin を使用するようにしました。