簡単導入！画像をズームさせるJavaScript「loupe | a jQuery image magnifier」

ECサイトなどでよく使用されている画像の一部分を拡大表示する手法。
これを簡単に導入できるloupe | a jQuery image magnifierを紹介します。

使用方法

loupe | a jQuery image magnifierからquery.loupe.jsをjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.loupe.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#id名').loupe();
});
</script>

あとは画像を用意して、上記idをふれば完成です。


<img id="id名" src="画像パス" width="191" height="240" />

サンプル

Javascriptサンプルページ一覧

skuare.net