jQuery のプラグインでサムネイル画像の拡大表示

サムネイル画像の拡大表示をする 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>

デモ
サンプル1サンプル2サンプル3サンプル4

ウチのサイトでは jQuery lightBox plugin を使用するようにしました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください