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-base-slider
  2. no-image
  3. Filterable Product Grid
  4. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

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

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  6. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

コメント

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

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

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP