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. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  2. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  3. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  4. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  5. OverlayScrollbars

コメント

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

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

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP