jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」

｜ ｜ ｜ ｜ ｜ ｜

爆発的な大ヒットとなったLightBoxですが、広まりすぎて先進的なイメージが薄れています。
そんな状況を打破すべくなのか、LightBoxのクローンは次々と生まれています。
今回紹介する「Fancy Zoom」もその一つで、昨今流行のJavaScriptライブラリjQueryを使用しています。

使用方法
使用方法は簡単です。
Fancy Zoomからダウロードしたファイルを以下のように記述します。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.js"></script>
<script type="text/javascript">
$(function() {
$.fn.fancyzoom.defaultsOptions.imgDir='閉じるボタンなどを置いた画像ディレクトリ'; //　最後は必ず/で終わってください。
$('.fancyzoom').fancyzoom();
});
</script>
あとは大きくしたい画像を下記の通り記述すれば完成です。
<a href="拡大画像" class="fancyzoom">
<img src="サムネイル画像" alt="キャプションです">
</a>
オプション

• Speed: アニメーション速度（0でなし）
• showoverlay: オーバーレイ (default true)
• overlay: 透明度の変更 (default 0.6)

2008年11月15日

前の記事：mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」
次の記事：Movable Type 4.xで「承認待ち」をメールで通知するプラグイン「EasyWorkflow」

関連記事

• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像をズームさせる「Pan full size images」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• 奥から手前にズームするJavaScript「Spacegallery.js」
• [jQuery]Galleria

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」