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

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

2013.03.11

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

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

[ads_center]

使い方

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

&lt;link rel=&quot;stylesheet&quot; href=&quot;nivo-zoom.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;jquery.nivo.zoom.pack.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

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

&lt;a href=&quot;images/pic_large.jpg&quot; class=&quot;nivoZoom&quot;&gt;
    &lt;img src=&quot;images/pic.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;

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

&lt;a href=&quot;images/pic_large.jpg&quot; class=&quot;nivoZoom center&quot;&gt;
    &lt;img src=&quot;images/pic.jpg&quot; alt=&quot;&quot; /&gt;
    &lt;div class=&quot;nivoCaption&quot;&gt;ここはキャプションです。&lt;/div&gt;
&lt;/a&gt;

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

&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
    $('body').nivoZoom();
});
&lt;/script&gt;

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

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

Nivo Zoom – jQuery Image Zoomer

JavaScript

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

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

bl6.jp

備忘録を綴るブログ

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

使い方

最近の記事