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

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

jQueryでウィンドウサイズによって処理を変えるjQueryのfocusとblurを使えばフォームが便利になる前のページ

Photoshopで画像に楕円形ツールを使ってドロップシャドウをつけてみる次のページ

関連記事

  1. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  2. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  3. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  4. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  5. Sliding Panels Template
  6. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

コメント

    • kono
    • 2013年 3月 12日

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

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

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP