最近お気に入りの高機能jQueryスライドショーのプラグイン Camera でのメモ。

camera.js にはループのON/OFFのオプションはない模様。
クライアントから要望があったので、callback使って自分で書いてみた。

以下の書き方で、スライドを1周表示させた後、最初の一枚で停止させることができます。

<div id='camera'>
  <div data-src="slide1.png" data-link="page1.html"></div>
  <div data-src="slide2.png" data-link="page2.html"></div>
  <div data-src="slide3.png" data-link="page3.html"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){

  var EndTransitionNum = 0;
  var slideNum = 0;
  var h = 260; //スライドショーの高さ
  var t = $('#camera'); //スライドショー対象

  // camera 
  t.camera({
    fx: 'simpleFade', //topLeftBottomRight , simpleFade ,blindCurtainTopRight
    height: h + 'px',
    easing: 'easeInOutCubic',
    navigation: false,
    navigationHover: true,
    pagination: false,
    playPause: false,
    pauseOnClick: false,
    hover: true,
    thumbnails: false,
    time: 3000,
    transPeriod: 1000,
    loader: 'none',
    onLoaded : function() {
      setSlideHeight(); //ロード完了後、高さ調整
      slideNum = t.find('.camera_target .cameraSlide').index(); //スライドの枚数を取得
    },
    onStartLoading : function() { setSlideHeight(); //ロードが始まった時に高さ調整},
    onEndTransition: function(){
      EndTransitionNum++; //スライドの切替回数をカウント
      var ind = t.find('.camera_target .cameraSlide.cameracurrent').index(); //現在表示してるスライドのIndex No
      // 一周ループした後、スライドが1枚目の時
      if( EndTransitionNum > slideNum && ind == 0 ) {
        t.cameraStop(); //スライドショー停止
      }
    }
  });

  //IE7-8対策： スライドショーの高さを固定
  function setSlideHeight ( ) {
    if( t.find('.camera_fakehover').height() < h ){
      t.find('.camera_fakehover').height(h);
    }
  }
});
</script>