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

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  2. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

  3. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  4. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  5. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  6. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

コメント

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

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

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP