JavaScript

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

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

[ads_center]

使い方

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

そして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にすると拡大表示される部分にドロップシャドウをつけることができます。

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

関連記事

  1. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  2. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  3. Zoomerang.js
  4. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  5. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  6. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

コメント

    • kono
    • 2013年 3月 12日

    こんにちは。このページを参考にさせて頂いております。

    質問ですが、
    この仕様だと、画像をクリックすると拡大画像が表示されると思いますが、
    クリックしてもなにもなにもおこらずそのままとしたいのですが、
    そのようなことはできますでしょうか??

    • はじめまして、こんにちは。
      今確認してみたところ確かにクリックすると拡大画像ページが表示されてしまいますね…。
      オプションでそういう指定ができないとなれば、プラグイン自体を弄ったりするしかないかと思います。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP