簡単・軽量！画像ズームjQueryプラグイン「Zoom」

ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。
これを簡単・軽量なjQuery image zooming pluginが解決してくれます。

使用方法

jQuery image zooming pluginからファイル一式をダウンロード。


<style>
.zoomIcon { 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}
.zoom {
	position:relative;
}
.zoom img {
	display: block;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.zoom.js"></script>
<script>
$(function() {
  $('#id名').zoom(
  	{ grab: true } //マウスクリック時に拡大させたい場合記述
  );
});
</script>

あとは画像を下記のように記述すれば完成です。


<p id="id名" class="zoom">
	<img src="画像パス" width="幅" height="高さ" />
</p>

サンプル

クリックで拡大

マウスオーバーで拡大

Javascriptサンプルページ一覧

skuare.net