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

ECサイトなどでよく使用されている画像の一部分を拡大表示する手法。
これを簡単に導入できるloupe | a jQuery image magnifierを紹介します。
簡単導入!画像をズームさせるJavaScript「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」サンプル

sponsors

「簡単導入!画像をズームさせるJavaScript「loupe | a jQuery image magnifier」」をシェアする

記事作成:
記事URL:

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