オートプレイ Autoplay fotorama API デモ

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

Fotoramaのページが表示された後に、ボタンクリックにより、手動でスライドショー(オートプレイ)を開始、停止したい場合は、
Javascriptを使用し、Fotorama APIのオプションstartAutoplay/stopAutoplayを設定します。その他のAutoplay以外のオプションは、class="fotorama"のDIVタグに設定します。
オプションautoplayのパラメータはdata-autoplayと同様です。
trueの場合、画像が静止している時間は5秒です。例えば、静止時間を3秒に変更したい場合は、 "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>

デモ(10枚)

photo by pixabay.com / powered by Fotorama (c) Artem Polikarpov


  最終更新日:2016.8.20(初版)