Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

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「loupe | a jQuery image magnifier」サンプル

記事作成：2009年12月14日