JavaScript

虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」を使ってみました。機能、使い方ともにシンプルで良いですね。これと似たようなプラグインは以前記事にもした「Loupe」や「jQuery Zoom」などがあります。使いどころは結構ありそうな感じなので、自分に合うものを選択して活用したいですね。以下、使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.mlens-1.0.min.js"></script>

続いて、HTMLで画像を記述していきます。通常のsrc属性には表示させるサイズの画像パスを、data-big属性には拡大時のサイズの画像パスを記述します。

<div id="jqsample-wrapper">
    <img id="jqsample" src="images/img-s.jpg" alt="sample" data-big="images/img-l.jpg" />
</div>

自分のサイトに合うようにCSSで見栄えを調整してあげます。画像を括っている要素にCSSを記述します。

#jqsample-wrapper {
    position: relative;
    width: 500px;
    height: auto;
}

あとは、mlensのオプションなどをセットすればOKです。

<script type="text/javascript">
$(document).ready(function()
{
    $("#jqsample").mlens(
        {
            imgSrc: $("#jqsample").attr("data-big"),
            lensShape: "circle",
            lensSize: 180,
            borderSize: 4,
            borderColor: "#fff",
            borderRadius: 0
    });
});
</script>

オプションによって、レンズの形、サイズ、ボーダーカラーなどを変更することができます。以下、いくつかご紹介。詳しくは公式サイトをご確認下さい。

lensShape
circle か square を指定します。レンズの形を変えることができます。
lensSize
レンズのサイズです。
borderSize
レンズ周りのボーダーサイズを変更できます。
borderColor
ボーダーの色を指定できます。

というわけで、画像にマウスを置いた所を虫メガネのように拡大できるjQueryプラグイン「mlens」の使い方についてでした。以下からダウンロードできます。

これと似たプラグインで以下のようなものもあるのでよろしければこちらも合わせてどうぞ。

最近購入したガジェット達「enecycle EN06」「ELECOM MPA-AMBIRL07BK」「Lightning Micro USBアダプタ」前のページ

Macの充電のアイコンの横に割合(%)の表示を付け足すやり方次のページ

関連記事

  1. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  2. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  3. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  4. JavaScript

    テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter…

    jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれ…

  5. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  6. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

コメント

  1. この記事へのコメントはありません。

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP