画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。LoupeというjQueryプラグインなんですが、これを使えばとても簡単に自分の指定した画像の一部を拡大したりできるようになります。また、単純に拡大しなくてもマウスオーバーした一部分だけに焦点を当て、それ以外の部分はオーバーレイで暗くするといった使い方もできるので結構おもしろいかと思います。サンプルも作ってみたのでよかったらそちらもどうぞ。以下、使い方です。

使い方

以下のサイトからファイルをダウンロードします。

そしてhead内にjQuery本体とCSS、JSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/jquery.loupe.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.loupe.js"></script>

あとは画像を指定します。

<script type="text/javascript">
$(document).ready(function(){
    $('#loupe1').loupe();
});
</script>

上記はIDにloupe1が指定されている画像に適用します。マークアップはこんな感じです。

<img alt="サンプル" src="images/image1.jpg" id="loupe1" />

これで以下のようなサンプルになります。画像にマウスを乗せると、スポットライトが当たったようになります。

サンプル01

拡大したい場合はaタグを追加して、href属性に拡大した時の画像を指定してあげます。

<a href="images/image-big.jpg" id="loupe1"><img alt="" src="images/image.jpg" /></a>

ついでにオプションも指定してみます。

$('#loupe1').loupe({
    'default_zoom': 100,
    'shape' : 'square',
    'default_size' : 160,
    'glossy' : false,
    'drop_shadow' : false 
});

これでこんな感じに拡大できるようになります。

オプションを色々変えると、また違った感じになるのでおもしろいですね。こちらは虫眼鏡で見ているようになります。

上記の画像のオプションは以下のようになります。

$('#loupe1').loupe({
    'default_zoom': 100,
    'default_size' : 160,
    'apply_overlay' : false,
    'drop_shadow' : false 
});

以下、少しだけオプションの解説です。

オプション

max_size
マウスオーバーした後にズームした時の最大サイズです。
min_size
マウスオーバーした後に縮小した時の最小サイズです。
default_size
最初にマウスオーバーした時に拡大表示される範囲のサイズを指定できます。
shape
マウスオーバーした時の拡大する部分の形を変更できます。circle、rounded、squareの中から選べます。
glossy
trueかfalseを指定できます。trueにすると拡大表示される部分に光沢が追加されます。レンズを通してみているようになります。
drop_shadow
trueかfalseを指定でき、trueにすると拡大表示される部分にドロップシャドウをつけることができます。

ということで他にも色々なパターンがあるので試してみるとおもしろいかと思います。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives