画像の一部を拡大 | jQuery逆引き | Webサイト制作支援

画像の一部を拡大するライブラリです。
次のサンプルでは、サムネール画像内にある赤枠の要素をドラッグすることで、拡大用のエリア（要素）に拡大画像が表示され赤枠内の範囲にある画像領域を表示します。

サンプル

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.image-zoom.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）
また、別途jQuery UIのcore.js、widget.js、mouse.js、draggable.jsをjQuery UIサイトからダウンロードをし読み込みます。
jQuery UI

【JavaScript】

【HTML】

【CSS】

div.sample-image-zoom {
								width:430px;
							}

div.sample-image-zoom p.thumbnail {
								margin:0;
								width:100px;
								height:83px;
								float:left;
								position:relative;
							}

div.sample-image-zoom p.thumbnail a.cursor {
								border:2px solid #d00;
								position:absolute;
								left:0;
								top:0;
								background: url("img/alpha.png"); /* IE対応のため透明の画像を当てる */
								z-index:1;
								cursor:pointer;
							}

div.sample-image-zoom p.thumbnail div.mouse-area {
								width:100px;
								height:83px;
								position:absolute;
								left:0;
								top:0;
								z-index:2;
								background: url("img/alpha.png"); /* IE対応のため透明の画像を当てる */
							}

div.sample-image-zoom div.zoom-area {
								margin:0;
								width:320px;
								height:264.4px;
								float:right;
								overflow:hidden;
								position:relative;
							}

div.sample-image-zoom div.zoom-area img {
								display:none;
								position:absolute;
								left:0;
								top:0;
							}

オプション

以下の設定が可能です。

オプション名	初期値	説明
targetElement	null	サムネイル画像の要素
viewZoomElement	null	拡大画像を表示する要素
zoomSuffix	'-zoom'	拡大画像のファイル名の接尾語（サムネイル画像のパスから拡大画像として読み込み、設置するために使用）
actionEvent	'drag'	拡大画像の移動の動作方法 'drag' = ドラッグで移動 'hover' = マウスオーバーで移動
zoomActionDragEvent	false	拡大画像もドラッグを許可するかどうか true = 有効（許可） false = 無効
defaultPosition	{ left : 0, top : 0 }	サムネイルに表示している拡大範囲カーソルの初期位置

画像の一部を拡大 image zoom