Movable Type 備忘録

Fancy Zoom with jQuery

Nov162008
Author: bzbell
Categories: Tools
Tags: jQuery

Prev Page: Color Fading Menu with jQuery
Next Page: Rounded Corners with jQuery

こんにちわ^^

最近 Podcast ってのでヒアリングの勉強も始めたんです。
iTunes Store から無料でダウンロードできるものがあるので、毎日それを聞きつつ電車の中では The Japan Times を読みながら通勤してます。
でもねぇ･･･朝の通勤時間帯はめっちゃ混んでる( 当然ですけど )ので、あまり落ち着いて読めないのが現状。なので今は女性専用車両に乗る事にしました。
ただねぇ･･･不便なんですよ。下車する駅の出口改札から相当遠くなるんです（つω-`｡）しょうがないので気持ち早めに出社するようにしました。

さて、前回に引き続き jQuery ネタをもう一つ。
Lightbox を筆頭にいろんなライブラリが配布されてますが、その中の一つ Fancy Zoom のご紹介です。

サンプルを表示できませんでした。

今どきのはどれも実装がカンタンですが、Fancy Zoom もめっちゃカンタンです。
Fancy Zoom は以下から入手できます。

jQuery plugin : Fancy Zoom

使い方

使い方はカンタンで基本的に以下の 3 つのオプションを指定するだけです。

Animation Speed

アニメーション・スピード( ミリ秒 )を指定します。デフォルトは 0( アニメーションなし )です。大きい値ほど早くなります。
Show Overlay

オーバーレイ表示有無を指定します。デフォルトは true です。
たぶんあった方がいいと思います。オーバーレイがないとズームアウトは×ボタンをクリックするしか選択の余地がなくなるから。
Overlay

透明度を変更します。デフォルトは 6/10( 0.6 )になります。
小さい値ほど透明度が増します。

上記オプションを HTML ヘッダ内に以下のように定義します。

HTML ヘッダ

<script type="text/javascript">
$(function(){
$.fn.fancyzoom.defaultsOptions.imgDir='http://●●●/FancyZoom/ressources/';
$('#demo > img.fancyzoom').fancyzoom({Speed:400, showoverlay:true, overlay:8/10});
});
</script>

青字の部分には ressources/ フォルダまでの相対パス( or URL )を指定します。
赤字の部分で適用エレメントを指定します。上記例だと以下のようにマークアップすることで Fancy Zoom が適用されます。

マークアップ