jQuery入門講座：Nivo Slider(3)

Nivo Slider(3)

概要と組み込み

「Nivo Slider」ではナビゲーションにサムネイルを利用することできます。ここではサムネイルを表示する方法について説明していきます。

サムネイルについての説明は本家ページの「Advanced Tutorials」経由でたどりつく「Using Thumbnails with the Nivo Slider」の記事を参考にしています。序文で「CSSやNivo Sliderについて十分な知識がある方を対象としています」といっているように非常に説明が少なく、自分でも完全に理解できているのか不安な部分もあります...。

解説

最小限の設定

サムネイル画像はメイン画像から自動的に作成されるのではなく、あらかじめ作成しておく必要があります。サムネイル画像を準備できたらhtmlにサムネイルの情報を追加します。サンプル（nivo3/01.html）を開いてメイン画像のimgタグに「data-thumb」属性が追加され、ここにサムネイル画像へのリンクが設定してあることを確認して下さい。htmlの変更はこれだけです。

<img src="../images/page1.jpg" data-thumb="../images/page1_thumb.jpg">
<img src="../images/page2.jpg" data-thumb="../images/page2_thumb.jpg">
<img src="../images/page3.jpg" data-thumb="../images/page3_thumb.jpg">
<img src="../images/page4.jpg" data-thumb="../images/page4_thumb.jpg">

続いてjQueryを確認して下さい。以下の様に前回紹介したオプションの「controlNavThumbs」プロパティをtrueに設定しています。結果としてサムネイル画像が表示されるようになりますが、サムネイル画像のサイズが引き延ばされてしまっています。これはcssを変更することで修正します。

nivoObj = new Object();
nivoObj.controlNavThumbs = true;
$('#slider').nivoSlider(nivoObj);

ちなみに昔はメイン画像と同じ階層に「メイン画像_thumb.jpg」と名付けたサムネイル画像を入れておくとimgタグにdata-thumbを追加しなくてもサムネイルを表示できたようです。本家ページの「Search and Replace Thumbnails (pre v3.0)」で説明されています。こちらのほうが便利だと思うのですが、現状のバージョンでは利用できないようです。何故廃止されてしまったのでしょう...。

cssの確認

サムネイルの表示に関する設定はテーマフォルダ内のcssで設定します。ここでのサンプルはdefaultのテーマを利用しているのでdefault.cssを編集することになります。しかし段階的にcssの編集過程を説明するため、ここではcssを複製しつつ修正していきます。

サンプル（nivo3/02.html）を開いてcssへのリンクが以下のように変更されていることを確認してください（それ以外はnivo3/01.htmlから変更していません）。default.cssの代わりにthumb02.cssを利用しています。

<link href="thumb02.css" rel="stylesheet" type="text/css" />

このcssファイルで着目するのは以下の3項目です（ファイルの最後に追加されている3項目です）。ここでサムネイルに関する設定しています。

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
	border:1px solid #f00;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
	border:1px solid #0f0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
	border:1px solid #00f;
}

thumb02.cssはdefault.cssから変更しており、上記の赤字の部分が追加されています。これにより、どのcssがどの部分を設定しているか確認できます。つまりサムネイル部分はnivo-thumbs-enabledクラスで囲まれており、この中のサムネイル画像（img要素）はa要素で囲まれていることが分かります。この情報を基に、サムネイル画像の表示を修正していきます。

サムネイル画像の大きさとマージンの指定

サンプル（nivo3/03.html）を開いてcssへのリンクが以下のように変更されていることを確認してください（それ以外はnivo3/01.htmlから変更していません）。default.cssの代わりにthumb03.cssを利用しています。

<link href="thumb03.css" rel="stylesheet" type="text/css" />

このcssファイルでthumb02.cssから変更した点は、以下の赤字部分です。まずa要素とimg要素のwidthとheightをサムネイル画像の大きさ（50px）に変更しました。またマージンを変更する場合はa要素に対して指定します（サンプルでは「0 50px」と指定）。

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
	border:1px solid #f00;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: 50px;
	height: 50px;
	margin:0 50px;
	background: none;
	border:1px solid #0f0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 50px;
	height: 50px;
	border:1px solid #00f;
}

表示上の設定はこれで終わりですが、インターフェイスとして足りない機能があります。それは「現在表示している画像がどれか」を分かるようにすることです。

現在位置の表示

「nivo slider」では現在表示されている画像のサムネイルには「active」クラスが付加されます。ですのでcssにてactiveクラスの設定を追加すれば、現在表示されているサムネイルを修飾する事ができます。

サンプル（nivo3/04.html）を開いてcssへのリンクが以下のように変更されていることを確認してください（それ以外はnivo3/01.htmlから変更していません）。default.cssの代わりにthumb04.cssを利用しています。

<link href="thumb04.css" rel="stylesheet" type="text/css" />

このcssファイルでthumb03.cssから変更した点は、要素を確認するためのボーダーを削除した点と以下の設定を追加した点です。この設定はactiveクラスが付加されたサムネイルの要素に対する設定で、サンプルではドロップシャドウと白枠を表示するようにしています。

.theme-default .nivo-controlNav.nivo-thumbs-enabled a.active {
	border:solid 1px #fff;
	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
	box-shadow: 0px 1px 5px 0px #4a4a4a;
}

結果として、現在表示されている画像のサムネイルが少し飛び出しているようなデザインとなります。cssの設定でボーダーを追加しているため、選択されているサムネイルの位置が少し移動してしまいます。これを回避したい場合は、選択されていないサムネイルにもボーダーを付けると良いでしょう。

サンプル（nivo3/04b.html）では選択されていないサムネイルにもグレーのボーダーを付けています（cssはthumb04b.cssを利用しています）。

.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	border:solid 1px #999;
	width: 50px;
	height: 50px;
	margin:0 50px;
	background: none;
}

マウスオーバーでの演出

cssで:hoverの設定を追加すれば、サムネイルにマウスオーバーした時の設定をする事ができます。サンプル（nivo3/05.html）を開いてcssへのリンクが以下のように変更されていることを確認してください（それ以外はnivo3/01.htmlから変更していません）。default.cssの代わりにthumb05.cssを利用しています。

<link href="thumb05.css" rel="stylesheet" type="text/css" />

このcssファイルでthumb04.cssから変更したのは、以下の様に:hoverの設定を追加している点です。

.theme-default .nivo-controlNav.nivo-thumbs-enabled a:hover {
	border:solid 1px #f00;
}

この追加によって、サムネイルにマウスオーバーするとボーダーが赤くなります。このようにcssの設定だけで色々とサムネイルの表現を変更することができますが、jQueryを利用して高度な演出をすることができません。

例えば次章ではカルーセルのプラグインを紹介する予定なのですが、サムネイル部分をカルーセルにする事などはできません。なので次回はプラグインを少し修正して外部から操舵できるように改造したいと思います。

次のページ：Nivo Sliderの改造