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

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  2. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  3. jQuery Section Navi Plugin
  4. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  5. Multi-level push menu
  6. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

コメント

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

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

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP