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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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日

前の記事：JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」
次の記事：お手軽に要素を切り替えるJavaScript「Quovolver | a simple jQuery plugin for revolving quotes」