画像表示アプリの作成(4) – jQuery Cycle Pluginの利用

前回はメインの画像表示(センターパネル)するのに、単純に「img要素のsrc属性」を設定していたが、画像表示用のjQueryプラグインであるjQuery Cycle Pluginを使ってみる。このプラグインを使うことで、表示の際にいろいろな効果を適用することができる。カルーセル表示に使った carouFredSelは効果を追加するのに別のプラグインが必要だが、このプラグインでは、デフォルトで30個近くの効果がビルトインされている。

センターパネルにjQuery Cycle Pluginを使ったサンプル：ximgview04.html

Cycleプラグインでは、初期化するとデフォルトで「スライドショー」が始まるが、このサンプルではスライドショーを一時停止し、javascriptのタイマーで表示する画像を指定している。(cycle()の引数に画像のインデックスを直接指定する。)

function imgCycleInit(){
  for(var i=0; i < gImgData.item.length; i++){
    $('#slideshow').append('<img src="' + gImgData.location + 
       gImgData.item[i].name + '" width="800" height="450">'); // 画像の設定
  }
  $('#slideshow').cycle({
    fx: 'fade' // 画像切替時の効果を設定(fade)
  });
  $('#slideshow').cycle('pause'); // スライドショーを一時停止
}

このように初期化して、以下のように cycle()メソッドで画像を切り替える。(タイマーで一定時間ごとに呼び出す。)

$('#slideshow').cycle(indexImg);

スライドショーの動作に関連して、’stop’ もあるが、これを使うとスライドショーが(完全に)停止し、cycle()で画像の切り替えができなくなるので注意。(以下リファレンスより引用)

'pause'   // pauses the slideshow, slideshow can be resumed with 'resume' command 
'resume'  // resumes a paused slideshow 
'toggle'  // toggles the pause/resume state of the slideshow 
'next'    // advances slideshow to next slide 
'prev'    // advances slideshow to previous slide 
'stop'    // stops the slideshow 
'destroy' // stops the slideshow and unbinds all events 

適用する効果の変更は以下のイメージで実現する。

$('#selCycleFxOption').combobox({ // #selCycleFxOption : セレクタのID
  onSelect: function(param){ // 選択時のイベントハンドラを定義
    var fxv = $('#selCycleFxOption').combobox('getValue'); //セレクタの値取得
    $('#slideshow').cycle({
        fx: fxv // 画像切替時の効果を設定
    });
    $('#slideshow').cycle('pause'); // スライドショーが再開されるので改めて一時停止
  }
});