前ページで3枚画像横スライドのスライドショーが完成しました。別のスライドショーも提案できる様に、もう一つ作ります。今回は、中央にドカンと大きい画像が有って、右側に縦に小さい画像を並べます。slider-pro-master中のexample5を参考にして、前ページで作ったsample8をアレンジします。example5を見ると、画面右側に縦に並べる小さい画像は、どうやらサムネイル(thumbnail)画像の概念の様です。従ってbodyタグ内クラス名sampleのdivには、メイン画像スライド用のdivとサムネイル画像スライド用divの2つを作ります。headタグ内sscript内にもメイン画像スライド用記述以外に、サムネイル画像スライド用記述が増えます。ID名slideshow(クラス名slider-pro)のdivの中にはクラス名sp-slidesのdivがありますが、それとは別にクラス名sp-thumbnailsのdivを作ります。クラス名sp-thumbnailsのdivの中は、下の様に、画像1枚づつ記述していきます。・</div>今回作ったサンプル9では、サムネイル画像としてメイン画像を流用しました。次はheadタグ内でsscriptタグ内を修正します。・width:div幅760の半分以上でも良いので435にします。・aspectRaio:指定しません。(記述無し)・height:300のままです。aspectRaio指定無しですから、height指定が効果を持ちます。サムネイルを何コマ表示するかにも効果を持ちます。・visibleSize:指定しません。(記述無し)・forceSizeSize:指定しません。(記述無し)・autoplayDelay:4000のままです。sscriptタグ内では、上記以外に、サムネイル対応で下の様な記述を追加します。135,追加したパラメーターを一つづつ確認します。・loopで、永遠に切り換え続けるかどうかを指定します。「true」で永遠に切り換えます。・buttonsで、スライドのページャを表示するかどうかを指定します。「false」では、表示しません。・thumbnailsPositionで、サムネイル画像列の位置を指定します。「’right’」で、主画像の右側の位置に表示します。right、left、top、bottomの4つが可能です。・thumbnailsPointerで、選択されたサムネイルにポインタを表示させるかどうかを指定します。「false」では、表示しません。・thumbnailsWidthで、サムネイル画像の幅を指定します。「135」で、135px幅の指定です。して修正したプログラムが、下です。動きは右のボタンから確認して下さい。