JavaScript

マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「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 src='jquery.zoom.js'></script>
<script>
$(document).ready(function(){
    // サンプル1
    $('#ex1').zoom();

    // サンプル2
    $('#ex2').zoom({
        grab: true,
        duration: 120
    });
});
</script>

続いて拡大させる画像を記述していきます。実際に読み込んでいる画像サイズよりも小さいサイズをimgのwidthとheightに指定します。

<!-- サンプル1 -->
<span class='zoom' id='ex1'>
    <p>Hover</p>
    <img src='img01.jpg' width='500' height='300'/>
</span>

<!-- サンプル2 -->
<span class='zoom' id='ex2'>
    <p>Grab</p>
    <img src='img01.jpg' width='300' height='300'/>
</span>

オプションはgrabをtrueにするとクリック時に拡大されるようになります。durationで拡大される時のフェードの時間を設定できます。他にもいくつかあるので詳しくは公式サイトで確認できます。

以下からご利用できます。

CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる前のページ

ATOK Pad(Mac)を使ってみたら呼び出しも簡単で使いやすかった次のページ

関連記事

  1. jquery.confirmDialog
  2. Clock Timepicker Plugin for jQuery
  3. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  4. no-image
  5. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  6. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP