jQuery:虫眼鏡のように画像を拡大するプラグイン「loupe」

jQuery画像マウスを合わせた時、虫眼鏡のように画像の一部を拡大して表示したい場合があります。
jQueryプラグインloupe」を使用すれば簡単に設定することが可能です。

jquery_loupe

ファイルがとても軽くて、設定の仕方も簡単なので楽に実装することができます。

今回は、jQueryのプラグイン「loupe」を使用して、画像にマウスを乗せた時に画像の一部を拡大させ、
虫眼鏡ルーペ)のように表示させる方法をメモします。

下記URLよりダウンロードして使用します。

https://github.com/jdbartlett/loupe


「loupe」の使用方法

「jquery.loupe.js」をダウンロードし下記のように設定します。

JS

「jQuery」とダウンロードした「jquery.loupe.js」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.loupe.js"></script>

クラスを「zoom」で指定した画像に対して、ルーペ(loupe)を使用するように設定します。
また、ルーペの幅、高さを指定しています。

<script type="text/javascript">
$(function() {
    $('.zoom').loupe({
        width: 200,
        height: 200
    });
});
</script>

CSS

マウスをあわせた時の虫眼鏡のスタイルを記述します。

<style type="text/css">
.loupe {
    border: 1px solid #000;
}
</style>

HTML

imgタグに「class=”zoom”」を記述しています。
また実際のサイズより小さいサイズで表示するように幅を指定しています。

<img src="sample.jpg" class="zoom" width="300" />

aタグで指定する場合は下記のように記述します。

<a class="zoom" href="sample.jpg">
    <img src="sample.jpg" width="300" />
</a>

大きい画像と小さい画像を用意して、imgタグに標準で表示する画像を設定し、
aタグに拡大する画像を設定することも可能です。
また、全く別々の画像を指定することも可能です。


上記の設定が完了後、設定した画像の上にマウスを持っていきます。

jquery_loupe1

マウスを画像にあてると、虫眼鏡のように画像が拡大して表示されます。

jquery_loupe2

簡単に設置することができるし、ショッピングサイトなど
色々な場面で使用できそうなのでオススメです。


  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です