Slider」ではナビゲーションにサムネイルを利用することできます。ここではサムネイルを表示する方法について説明していきます。Slider」の記事を参考にしています。Sliderについて十分な知識がある方を対象としています」といっているように非常に説明が少なく、自分でも完全に理解できているのか不安な部分もあります...。最小限の設定サムネイル画像はメイン画像から自動的に作成されるのではなく、あらかじめ作成しておく必要があります。サムネイル画像を準備できたらhtmlにサムネイルの情報を追加します。サンプル(nivo3/01.html)を開いてメイン画像のimgタグに「data-thumb」属性が追加され、ここにサムネイル画像へのリンクが設定してあることを確認して下さい。htmlの変更はこれだけです。data-thumb="../images/page4_thumb.jpg">続いてjQueryを確認して下さい。以下の様に前回紹介したオプションの「controlNavThumbs」プロパティをtrueに設定しています。結果としてサムネイル画像が表示されるようになりますが、サムネイル画像のサイズが引き延ばされてしまっています。これはcssを変更することで修正します。true;$('#slider').nivoSlider(nivoObj);ちなみに昔はメイン画像と同じ階層に「メイン画像_thumb.jpg」と名付けたサムネイル画像を入れておくとimgタグにdata-thumbを追加しなくてもサムネイルを表示できたようです。v3.0)」で説明されています。こちらのほうが便利だと思うのですが、現状のバージョンでは利用できないようです。廃止されてしまったのでしょう...。cssの確認サムネイルの表示に関する設定はテーマフォルダ内のcssで設定します。ここでのサンプルはdefaultのテーマを利用しているのでdefault.cssを編集することになります。段階的にcssの編集過程を説明するため、ここではcssを複製しつつ修正していきます。サンプル(nivo3/02.html)を開いてcssへのリンクが以下のように変更されていることを確認してください(それ以外はnivo3/01.htmlから変更していません)。default.cssの代わりにthumb02.cssを利用しています。/>このcssファイルで着目するのは以下の3項目です(ファイルの最後に追加されている3項目です)。ここでサムネイルに関する設定しています。#00f;}thumb02.cssはdefault.cssから変更しており、上記の赤字の部分が追加されています。これにより、どのcssがどの部分を設定しているか確認できます。サムネイル部分はnivo-thumbs-enabledクラスで囲まれており、この中のサムネイル画像(img要素)はa要素で囲まれていることが分かります。この情報を基に、サムネイル画像の表示を修正していきます。サムネイル画像の大きさとマージンの指定サンプル(nivo3/03.html)を開いてcssへのリンクが以下のように変更されていることを確認してください(それ以外はnivo3/01.htmlから変更していません)。default.cssの代わりにthumb03.cssを利用しています。/>このcssファイルでthumb02.cssから変更した点は、以下の赤字部分です。a要素とimg要素のwidthとheightをサムネイル画像の大きさ(50px)に変更しました。#00f;}表示上の設定はこれで終わりですが、インターフェイスとして足りない機能があります。それは「現在表示している画像がどれか」を分かるようにすることです。slider」では現在表示されている画像のサムネイルには「active」クラスが付加されます。cssにてactiveクラスの設定を追加すれば、現在表示されているサムネイルを修飾する事ができます。サンプル(nivo3/04.html)を開いてcssへのリンクが以下のように変更されていることを確認してください(それ以外はnivo3/01.htmlから変更していません)。default.cssの代わりにthumb04.cssを利用しています。/>このcssファイルでthumb03.cssから変更した点は、要素を確認するためのボーダーを削除した点と以下の設定を追加した点です。この設定はactiveクラスが付加されたサムネイルの要素に対する設定で、サンプルではドロップシャドウと白枠を表示するようにしています。#4a4a4a;}結果として、現在表示されている画像のサムネイルが少し飛び出しているようなデザインとなります。cssの設定でボーダーを追加しているため、選択されているサムネイルの位置が少し移動してしまいます。これを回避したい場合は、選択されていないサムネイルにもボーダーを付けると良いでしょう。サンプル(nivo3/04b.html)では選択されていないサムネイルにもグレーのボーダーを付けています(cssはthumb04b.cssを利用しています)。none;}マウスオーバーでの演出cssで:hoverの設定を追加すれば、サムネイルにマウスオーバーした時の設定をする事ができます。サンプル(nivo3/05.html)を開いてcssへのリンクが以下のように変更されていることを確認してください(それ以外はnivo3/01.htmlから変更していません)。default.cssの代わりにthumb05.cssを利用しています。/>このcssファイルでthumb04.cssから変更したのは、以下の様に:hoverの設定を追加している点です。#f00;}この追加によって、サムネイルにマウスオーバーするとボーダーが赤くなります。このようにcssの設定だけで色々とサムネイルの表現を変更することができますが、jQueryを利用して高度な演出をすることができません。次章ではカルーセルのプラグインを紹介する予定なのですが、サムネイル部分をカルーセルにする事などはできません。次回はプラグインを少し修正して外部から操舵できるように改造したいと思います。