プラグインでスライドショー
    ● 二つ目に挑戦


前ページで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枚づつ記述していきます。

class="sp-thumbnails">
      <img class="sp-thumbnail" scr="1枚目のサムネイル画像">
      <img class="sp-thumbnail" scr="2枚目のサムネイル画像">
            ・
            ・
</div>

今回作ったサンプル9では、サムネイル画像としてメイン画像を流用しました。

 

次はheadタグ内でsscriptタグ内を修正します。

width:div幅760の半分以上でも良いので435にします。

aspectRaio:指定しません。(記述無し)

height:300のままです。

          aspectRaio指定無しですから、height指定が効果を持ちます。

          サムネイルを何コマ表示するかにも効果を持ちます。

visibleSize:指定しません。(記述無し)

forceSizeSize:指定しません。(記述無し)

autoplayDelay:4000のままです。

sscriptタグ内では、上記以外に、サムネイル対応で下の様な記述を追加します。

orientation: ’vertical’,
loop: true,
buttons: false,
thumbnailsPosition: ’right’,
thumbnailsPointer: false,
thumbnailsWidth: 135,

追加したパラメーターを一つづつ確認します。

loopで、永遠に切り換え続けるかどうかを指定します。

        「true」で永遠に切り換えます。

buttonsで、スライドのページャを表示するかどうかを指定します。

        「false」では、表示しません。

thumbnailsPositionで、サムネイル画像列の位置を指定します。

        「’right’」で、主画像の右側の位置に表示します。

        right、left、top、bottomの4つが可能です。

thumbnailsPointerで、選択されたサムネイルにポインタを表示させるかどうか

             を指定します。

        「false」では、表示しません。

thumbnailsWidthで、サムネイル画像の幅を指定します。

        「135」で、135px幅の指定です。

こうして修正したプログラムが、下です。

プログラム

 

動きは右のボタンから確認して下さい。ボタン

ページトップへ

←前ページへ               目次へ戻る               

コーナー