オートプレイ Autoplay fotorama API デモ

Fotoramaのページが表示された後に、ボタンクリックにより、手動でスライドショー（オートプレイ）を開始、停止したい場合は、
Javascriptを使用し、Fotorama APIのオプションstartAutoplay/stopAutoplayを設定します。その他のAutoplay以外のオプションは、class="fotorama"のDIVタグに設定します。
オプションautoplayのパラメータはdata-autoplayと同様です。
trueの場合、画像が静止している時間は５秒です。例えば、静止時間を３秒に変更したい場合は、 "3000"(単位ミリセカンド）を指定します。
自動スライドショー（オートプレイ）の開始後、画像画面のクリックで、画面をスライドさせることができますが、自動スライドショーは停止します（デフォルト）。
自動スライドショーを継続したい場合は、オプションdata-stopautoplayontouch="false"を追加します。

HTML
Javascript

 <input id="button-autoplay" type="button" value="自動スライド開始">
 <input id="button-stopautoplay" type="button" value="自動スライド停止">
 <input id="button-shuffle" type="button" value="写真シャッフル">
<div class="fotorama" id="fotorama-divid" 
  data-loop="true" data-width="800" data-fit="cover" 
  data-nav="thumbs" data-thumbheight="32" data-keyboard="true"
  data-stopautoplayontouch="false">
  <img src="images/panorama/01.jpg" data-thumbratio="2/1" data-caption="1">
  <img src="images/panorama/02.jpg" data-thumbratio="2/1" data-caption="2">
  <img src="images/panorama/03.jpg" data-thumbratio="2/1" data-caption="3">
  <img src="images/panorama/04.jpg" data-thumbratio="2/1" data-caption="4">
  <img src="images/panorama/05.jpg" data-thumbratio="2/1" data-caption="5">
  <img src="images/panorama/06.jpg" data-thumbratio="2/1" data-caption="6">
  <img src="images/panorama/07.jpg" data-thumbratio="2/1" data-caption="7">
  <img src="images/panorama/08.jpg" data-thumbratio="2/1" data-caption="8">
  <img src="images/panorama/09.jpg" data-thumbratio="2/1" data-caption="9">
  <img src="images/panorama/10.jpg" data-thumbratio="2/1" data-caption="10">
</div>

<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);
  });

//*** shuffle 写真の並び替え
  $(function () {
    var $fotorama = $('#fotorama-divid'),
        fotorama = $fotorama.data('fotorama');
    $('#button-shuffle').on('click', fotorama.shuffle);
  });
</script>

ボタンクリックでオートプレイを開始／停止する Autoplay ボタンクリックで写真をシャッフルする shuffle fotorama API デモ

ボタンクリックでオートプレイを開始／停止する Autoplay
ボタンクリックで写真をシャッフルする shuffle fotorama API デモ