サムネールナビゲー―ションを自分て作る Thumbnails fotorama API デモ

Fotoramaのサムネールナビゲーションのサムネール画像は、表示画像が多い場合、一度にすべてのサムネール画像を表示してくれません。
そこで、表示画像のすべてのサムネール画像を表示するサムネールナビゲーションを作ってみました。
サムネール画像の配置は、上、下、左や右と自由自在になります。また、上下に２分割などの配置も可能になります。
また、Fotoramのサムネールナビゲーションやドットナビゲーションと併用ができて操作性が上がります（ダブルナビゲーション）。
ただし、Fotorama表示画像とサムネール画像は別々に定義します。

APIのAPI startAutoplayとAPI activeIndexを併用した場合の動作
オプションdata-auto	API fatorama.startAutoplay	API fotorama.activeIndex	Fotoramaサムネールナビ
false	×動作しない	×動作しない（単独使用の場合は正常）	×表示されない
true	〇	△ページロード後の0が来ない	〇
オプション未定義	〇	△ページロード後の0が来ない	〇
※fatorama.startAutoplay；オートプレイ開始メソッド ※fotorama.activeIndex；選択した画像の番号（0～）取得メソッド

HTML
Javascript
CSS

<body onload="StartIndex(0)">

<div class="fotorama" id="fotorama-divid" data-loop="true" data-width="800" data-fit="cover"
 data-keyboard="true" data-stopautoplayontouch="false" style="width:800px">
  <img src="images/panorama/01.jpg"  data-caption="1"> <!-- data-captiontタイトルはデモ用 -->
  <img src="images/panorama/02.jpg"  data-caption="2">
  <img src="images/panorama/03.jpg"  data-caption="3">
  <img src="images/panorama/04.jpg"  data-caption="4">
  <img src="images/panorama/05.jpg"  data-caption="5">
  <img src="images/panorama/06.jpg"  data-caption="6">
  <img src="images/panorama/07.jpg"  data-caption="7">
  <img src="images/panorama/08.jpg"  data-caption="8">
  <img src="images/panorama/09.jpg"  data-caption="9">
  <img src="images/panorama/10.jpg"  data-caption="10">
</div>
<hr width=800 align=left>
<!-- サムネール ↓ -->
<ul class="lilist thumbul">
  <li id="0" class="thumbli" onclick="StartIndex(0)"><img src="images/panorama/01.jpg" title="1" width=150 height=75></li>
  <li id="1" class="thumbli" onclick="StartIndex(1)"><img src="images/panorama/02.jpg" title="2" width=150 height=75></li>
  <li id="2" class="thumbli" onclick="StartIndex(2)"><img src="images/panorama/03.jpg" title="3" width=150 height=75></li>
  <li id="3" class="thumbli" onclick="StartIndex(3)"><img src="images/panorama/04.jpg" title="4" width=150 height=75></li>
  <li id="4" class="thumbli" onclick="StartIndex(4)"><img src="images/panorama/05.jpg" title="5" width=150 height=75></li>
  <li id="5" class="thumbli" onclick="StartIndex(5)"><img src="images/panorama/06.jpg" title="6" width=150 height=75></li>
  <li id="6" class="thumbli" onclick="StartIndex(6)"><img src="images/panorama/07.jpg" title="7" width=150 height=75></li>
  <li id="7" class="thumbli" onclick="StartIndex(7)"><img src="images/panorama/08.jpg" title="8" width=150 height=75></li>
  <li id="8" class="thumbli" onclick="StartIndex(8)"><img src="images/panorama/09.jpg" title="9" width=150 height=75></li>
  <li id="9" class="thumbli" onclick="StartIndex(9)"><img src="images/panorama/10.jpg" title="10" width=150 height=75></li>
</ul>

<script>
//*** Autoplay start開始／stop停止（自作サムネールナビゲーションと関係ありません）
  //start
  $(function () {
    var $fotorama = $('#fotorama-divid'),
         fotorama = $fotorama.data('fotorama');
    $('#button-autoplay').on('click', fotorama.startAutoplay);
  });
  //stop
  $(function () {
    var $fotorama = $('#fotorama-divid'),
         fotorama = $fotorama.data('fotorama');
    $('#button-stopautoplay').on('click', fotorama.stopAutoplay);
  });

//***自作サムネールナビゲーションイベントハンドラー（サムネール画像クリック）
function StartIndex(p){
  $(function(){
   //画像スタートインデックス fotorama.show(p)
     var $fotorama = $('#fotorama-divid'),
         fotorama = $fotorama.data('fotorama');
         fotorama.show(p);                       //選択された画像をFotorama画面に表示
   //サムネールインデックス
         $("li.thumbli").removeClass("selected"); //すべてのサムネール画像の選択状態を一括削除
	 $("#" + p).addClass("selected");         //選択されたサムネール画像を選択状態に
    });

}
//*** Fotoramアクティブインデックス イベントハンドラー（Fororama操作）
  $(function () {
	$('.fotorama')
	      .on('fotorama:show', function (e, fotorama, direct) {
                 StartIndex(fotorama.activeIndex);
		}) 
		.fotorama();  //IDスセレクタ名fotoramaIndexでFotorama設定
	});
</script>

<style type="text/css">
 /*  LIタグで横並びにする    */
 UL.lilist li {
	    float: left;
	    list-style-type: none;
   }
 UL.lilist { zoom:1;  overflow: hidden;} /* 横並びの ClearHack */

 /* 自作サムネールナビゲーション  hover selected */
			ul.thumbul{
				list-style: none;
				margin: 0px 0px 0px 0px;
				padding: 5px;
                                width:800px;
                                background-color:#dcdcdc
			}
			ul.thumbul li.thumbli {
                                margin: 0px 2px 0px 2px;
				padding: 3px 3px 3px 3px; 
                                background-color:#dcdcdc
				width: 150px;
				height: 75px;
				/*_width: 241px;*/
				/*_height: 34px;*/
				cursor:pointer;
				color:#333;
			}
			ul.thumbul li.thumbli:hover {
				background-color:yellow;
			}
			ul.thumbul li.thumbli.selected {                       
				background-color:#00bfff;
				cursor:default;
			}
</style>

サムネールナビゲーションを自分でつくる Thumbnails fotorama API デモ