Tweet｜ ｜ ｜ ｜

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

ECサイトなどで商品のより細かい部分まで見てもらいたい時があります。
そんな時は、JavaScriptを使用し、拡大表示させてみてはいかがでしょうか。
jQueryのプラグイン「jLoupe」を利用します。

使用方法
jLoupeからjquery.jloupe.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jloupe.js"></script>

次に拡大表示させたい画像を記述します。
<img src="画像パス" width="" class="jLoupe">
※画像サイズ（width）は必ず指定ください。
上記のやり方ですと大きい画像をそのまま小さくしているだけですが、指定次第で以下のような形にもできます。
<img src="サムネイル画像パス" longdesc="フル画像パス" class="jLoupe">
JavaScriptで画像の一部を拡大表示する「jLoupe」サンプル

記事作成：2009年09月08日