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

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  2. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  3. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  4. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  5. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  6. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

コメント

    • kono
    • 2013年 3月 12日

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

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

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

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

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP