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. Inspiration for Grid Loading Animations
  2. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  3. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  4. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  5. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  6. Clock Timepicker Plugin for jQuery

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP