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

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

使用方法
使用方法は簡単です。
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)
jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」サンプル

sponsors

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

記事作成:
記事URL:

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