JavaScriptで画像の一部を拡大表示する「jLoupe」

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

sponsors

「JavaScriptで画像の一部を拡大表示する「jLoupe」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptで画像の一部を拡大表示する「jLoupe」