PbTimes 情報誌

マウスオーバーで画像をズーム表示するjQueryの紹介

2013/10/07

• Plugin
• jQuery

画像をズーム表示

zoom jQuery

マウスオーバーで画像をズームして表示するためのjQueryプラグインを紹介します。
大きな画像を表示したいがその画像ば場所をとるのは避けたい。
そんな時に、小さい枠で表示しておきマウスを載せた箇所が拡大表示されるためとても便利です。

ダウンロードはGitHubから行えます。
ダウンロードしたディレクトリ内の「demo.html」を見ることで、一通りの設定方法が分かると思います。

GitHub

設定例

htmlを以下のように記述します。

<span class='zoom' id='ex1'>
	<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
	<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
	<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
	<p>Grab</p>
</span>

CSSを以下のように記述します。

/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */
.zoom {
	display:inline-block;
	position: relative;
}

/* magnifying glass icon */
.zoom:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

.zoom img {
	display: block;
}

.zoom img::selection { background-color: transparent; }

#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }

JavaScriptを以下のように記述します。

$(document).ready(function(){
	$('#ex1').zoom();
	$('#ex2').zoom({ on:'grab' });
});

「ex1」の値はhtmlで記述したIDと合わせてください。
zoom関数では、上記の「デフォルト（指定なし）」と「grab」の他に「click」、「toggle」が指定できます。
それぞれの動作は以下のようになります。