Nivo Zoom

JavaScript

Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」をご紹介します。サムネイル画像をクリックすると画像がズームして表示されます。ズームする画像が読み込まれる間はローディング画像も表示されます。ちなみにライセンスはMITとのことです。

[ads_center]

使い方

jQuery本体とダウンロードしたJS・CSSファイルをhead内に読み込みます。

<link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.zoom.pack.js" type="text/javascript"></script>

マークアップは以下のようにシンプルに記述することができます。aタグのhref属性にはズームする画像パスを記述して、nivoZoomというクラスを指定します。

<a href="images/pic_large.jpg" class="nivoZoom">
    <img src="images/pic.jpg" alt="" />
</a>

画像にキャプションを入れたい場合にはnivoCaptionというクラスを付けたdiv要素を追加していきます。

<a href="images/pic_large.jpg" class="nivoZoom center">
    <img src="images/pic.jpg" alt="" />
    <div class="nivoCaption">ここはキャプションです。</div>
</a>

あとはnivoZoomをセットしればOKです。

<script type="text/javascript">
$(window).load(function() {
    $('body').nivoZoom();
});
</script>

オプションではスピードやオーバーレイのカラー・透明度などを指定することもできます。

また、サポートしているブラウザは、Internet Explorer v7+、Firefox v3+、Google Chrome v4、Safari v4となっています。Nivo Zoomのダウンロードや実際のデモ、詳しい詳細に関しては以下の公式サイトをご確認ください。

フリーとは思えないくらい素敵なトラベル用WordPressテーマ前のページ

WordPressのwp_nav_menu()で出力した親カテゴリーのリンクを無効にするjQueryスニペット次のページWordPressのログイン時のツールバー

関連記事

  1. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  3. jquery-scrollstop

    JavaScript

    スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

    jquery-scrollstopはスクロールの開始・終了時のイベント…

  4. jQuery Glow
  5. JavaScript

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

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

コメント

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP