こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。LoupeというjQueryプラグインなんですが、これを使えばとても簡単に自分の指定した画像の一部を拡大したりできるようになります。また、単純に拡大しなくてもマウスオーバーした一部分だけに焦点を当て、それ以外の部分はオーバーレイで暗くするといった使い方もできるので結構おもしろいかと思います。サンプルも作ってみたのでよかったらそちらもどうぞ。以下、使い方です。
[ads_center]
使い方
以下のサイトからファイルをダウンロードします。
jQuery Loupe plugin
そして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" />
これで以下のようなサンプルになります。画像にマウスを乗せると、スポットライトが当たったようになります。
拡大したい場合は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にすると拡大表示される部分にドロップシャドウをつけることができます。
ということで他にも色々なパターンがあるので試してみるとおもしろいかと思います。
