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で拡大される時のフェードの時間を設定できます。他にもいくつかあるので詳しくは公式サイトで確認できます。

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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  2. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP