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のダウンロードや実際のデモ、詳しい詳細に関しては以下の公式サイトをご確認ください。

関連記事

  1. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  2. Hamburger Icon Menu
  3. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  4. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  5. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP