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. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  3. funnyText.js
  4. Rain & Water Effect Experiments
  5. Simple Sidebar
  6. infiniteSlider2.js

コメント

    • kono
    • 2013年 3月 12日

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

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

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

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

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP