skuare.net

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)

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

記事作成：2008年11月15日

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

関連記事

• jQueryでLightBoxライク画像ギャラリー「piroBox」
• jQueryベースのLightBox風ギャラリー「jQuery BigPicture」
• jQueryベースで綺麗なLightBox風JavaScript「ColorBox」
• アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」
• インライン型LightBoxを実現するJavaScript「jQuery.popeye」

人気記事

最新記事RSS

• JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
• でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
• mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
• これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
• MVPenでアナログの良さを考え直す。
• 第3回「マネタイズHACKS」に参加してみた。
• div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
• jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
• 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
• iPhoneライクにスクロールさせるJavaScript「OverScroll」