jQuery Zoom Plugin

画像をGoogleMapのように拡大縮小表示するjQuery Pluginです。

大きな画像をHTMLやCSSで小さく表示しておき、このプラグインでCSSの値を変えて拡大・縮小します。

名称
jQuery Zoom Plugin
制作・著作
有限会社キートン
動作確認済みブラウザ
Win:IE 8, Firefox 3.6.3, Safari 5.0, Google Chrome 5.0.375.70, Opera 10.53, IE 7/6(IETester)
Mac:Firefox 3.6.3, Safari 4.1
ライセンス
GPL and MIT License

DEMO

BigBenTimes Square

上記画像は、Public Domain Picturesの画像を使用しています。

マウスカーソルを画像の上に移動して、マウスのホイールをスクロールすると、マウスカーソルを中心に拡大縮小します。

画像左側の目盛を上下に移動するか「+」、「-」をクリックすると拡大縮小します。

画像をドラッグすると上下左右に移動できます。

ダウンロード

jQuery Zoom Plugin(Minified)
jquery_zoom_min.zip(5.67KB)
jQuery Zoom Plugin
jquery_zoom.zip(5.21KB)

設置方法

ここでは、index.htmでZoom Pluginを使用する場合を例に説明します。

  1. 上記から、ファイルをダウンロードします。
  2. さらに、「jQuery」、「jQuery UI」、「jQuery Mousewheel Plugin」を使用するので、下記リンク先からダウンロードしておきます。 「jQuery UI」は、ユーザーインターフェースに関するプラグインの総称です。
    ダウンロードページにはプラグインが30(2010.06.17現在)ありますが、ここで使用するのは以下の4種類です。
    • Core
    • Draggable
    • Widget
    • Mouse
    「jQuery UI」のダウンロードページでは最初にすべてが選択された状態で表示されるので、「Deselect all components」をクリックしてすべての選択を外します。
    [Core]と[Draggable]を選択すると、「Widget」と「Mouse」も自動的に選択されます。
    右側の「Download」をクリックしてダウンロードしてください。
  3. ダウンロードしたファイルを解凍し、以下のように「js」フォルダに保存します。
    [root]
    ├[js]
    │ ├[zoom-parts]
    │ ├ jquery-1.4.2.min.js
    │ ├ jquery.mousewheel.min.js
    │ ├ jquery.zoom-min.js
    │ ├ jquery-ui-1.8.2.custom.min.js
    │ └ zoom.css
    index.htm
  4. ダウンロードしたjavascriptやCSSを読み込むように、index.htmのhead要素内に以下の記述を追加します。
    <link rel="stylesheet" href="js/zoom.css" type="text/css">
    	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    	<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
    	<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    	<script type="text/javascript" src="js/jquery.zoom-min.js"></script>
    	<script>
    	// <![CDATA[
    	$(function(){$(".imgZoom").zoom();});
    	// ]]>
    	</script>
    
    「".imgZoom"」はCSSセレクタで、対象とするIMG要素のクラス名と同じであれば任意に設定できます。(下記「5.」参照)
    「.zoom()」はこのプラグインを呼び出しているため、変更はできません。
  5. index.htmにimgタグを記述します。
    <img src="images/BigBen.jpg" width="320" height="240" class="imgZoom" alt="BigBen" />
    クラス名(imgZoom)は上記「4.」で指定したクラス名と同じにします。
    alt属性を記入すれば、画像の右上にキャプションとして表示できます。
    幅(width)と高さ(height)は、初期表示の画像サイズを指定します。元画像の比率にあわせて設定してください。

    画像サイズについて

    このプラグインは大きな画像(1280 × 960など)を最初に小さく表示(320 x 240)しておき、マウスのスクロールやスケールバーの操作で幅と高さを変更して拡大縮小します。

    なお、ここでは初期表示の画像サイズをIMG要素のwidth, height属性で指定していますが、CSSで指定することもできます。
    .imgZoom { width: 320px; height: 240px; }

オプション

head要素内に記述した「$(".imgZoom").zoom()」の「.zoom()」にオプションを指定できます。

オプション指定例

「サイズ指定モード」で縦120px × 横120pxで、最大倍率300倍の場合

$(".imgZoom").zoom({fix:true,height:120,width:120,max:300});

以下の倍率(%)は、IMG要素で指定した初期表示の画像サイズ(320 x 240)を100%として計算しています。

拡大倍率(par)

マウススクロール1回あたりの拡大率を指定できます。(デフォルトは「10」%)

初期倍率(initial)

画像の初期倍率を指定できます。(100以上。デフォルトは「100」%)

最小倍率(min)

画像の最小倍率を指定できます。(100以上。デフォルトは「100」%)

最大倍率(max)

画像の最大倍率を指定できます。(デフォルトは「500」%)

サイズ指定モード(fix)

上記のIMG要素で指定した画像サイズに関係なく、オプションで指定したサイズ(後述)に統一して画像を表示できます。高さや幅が異なる画像を並べて表示する場合に便利です。

サイズ指定モード(true)
オプションで指定したサイズで表示します。縦や横に余白ができる場合は、余白を黒く塗りつぶします。
サンプル:(120px × 120pxで表示)
デフォルト(false)
元の画像と同一のサイズで表示します。

表示サイズ(height,width)

サイズ指定モードが「true」のときの表示サイズを指定します。

更新履歴

公開(Ver.1.0.0)

ページトップに戻る