skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

簡単導入！画像をズームさせる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「loupe | a jQuery image magnifier」サンプル

記事作成：2009年12月14日

前の記事：複数のselect要素を連動させるJavaScript「Dependent Select」
次の記事：画像を背景に100%で表示させるJavaScript「fullscreenr」