skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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」