Cycle

Cycleプラグインはトップページでも使っている、画像を様々な手法で連続的に表示するプラグインです。
ここではjGlycy上での実装を書きますが、非常にシンプルな呼び出しなので、直接呼び出す場合にも参考になると思います。

ホームページ

まず、他のプラグイン同様にCycleプラグインをロードします。
その際、このプラグインはかなり多くの他のプラグインに依存するので注意して下さい。
よくわからない場合は、ダウンロードページから”Cycle Core With All Transitions”とあるものを使うと良いでしょう。

次に連続表示させたい画像をdiv要素内に並べ、そこにjGlycyへの呼び出しを記述します。

<div jg="cycle">
  <img src="/your/path/photo_1.jpg" />
  <img src="/your/path/photo_2.jpg" />
  <img src="/your/path/photo_3.jpg" />
  <img src="/your/path/photo_n.jpg" />
</div>

これだけで、デフォルトの動作（フェードでの切り替え）は完了です。

但し、JavaScriptをカットした環境下でのレイアウト崩れを気にするようでしたら、先頭の画像以外は “display: none”などを設定して非表示にしておくと良いでしょう。

切り替え動作を、次のうちから選択します。

• fade
• shuffle
• zoom
• slideX
• slideY
• scrollUp
• scrollDown
• scrollLeft
• scrollRight

デフォルトは 'fade' です。

スライドが切り替わる間隔をミリ秒で指定します。
この値をゼロにした場合、自動的に切り替わらなくなります。
(continuousなどと同時に設定すると、そちらが優先されますが)

デフォルトは 4000 です。

この値をtrueにすると、スライドの切り替えが完全に連続して行われるようになります。

デフォルトは 0 です。

切り替え効果のスピードを指定します。

デフォルトは 1000 です。

切り替え効果のうち 'in' の部分の速度を指定します。
nullを指定した場合、その速度は speed の値を継承します。

デフォルトは null です。

切り替え効果のうち 'out' の部分の速度を指定します。
nullを指定した場合、その速度は speed の値を継承します。

デフォルトは null です。

クリックした際に「次へ」の動作となる要素のidを指定します。 マニュアルには”id”とありますが、idであれば先頭に'#'をつけないと動作しませんので注意して下さい。

デフォルトは null です。

クリックした際に「前へ」の動作となる要素を指定するセレクターを設定します。
マニュアルには”id”とありますが、idであれば先頭に'#'をつけないと動作しませんので注意して下さい。

デフォルトは null です。

prev/nextに指定した要素がクリックされた際に呼ばれるコールバック関数を設定します。
コールバック関数は次の引数を取ります。

• isNext: 「次へ」が押されたのであればtrue、そうでなければfalse
• zeroBasedSlideIndex: 現在表示されている画像のインデックスを、先頭をゼロとした連番で返す
• slideElement: 次に表示される画像の要素を帰します。

番号を押すだけで指定画像に切り替わるページャ機能を提供する、要素を指定するセレクターを渡します。
マニュアルには”id”とありますが、idであれば先頭に'#'をつけないと動作しませんので注意して下さい。

デフォルトは null です。

pagerに指定した要素がクリックされた際に呼ばれるコールバック関数を設定します。
コールバック関数は次の引数を取ります。

• zeroBasedSlideIndex: 現在表示されている画像のインデックスを、先頭をゼロとした連番で返す
• slideElement: 次に表示される画像の要素を帰します。

ページャが各画像のリンクを作る際に呼び出されるコールバック関数を設定します。
コールバック関数は次の引数を取ります。

• i: インデックス
• o: 対になる画像要素

この関数を設定することで、作られるリンクを自由にカスタマイズすることが出来ます。
任意のHTMLを作成し、戻り値で渡してやります。

画像が表示される前に呼ばれるコールバック関数を指定します。

画像が表示された後に呼ばれるコールバック関数を指定します。

autostopやnowrapが指定された場合、スライドが停止した際に呼ばれるコールバック関数を指定します。

切り替え効果に設定するeasing（効果の大きさを決める計算式）処理を決めます。
nullが指定された場合、デフォルトの線形処理が使われます。

デフォルトは null です。

切り替え効果のうち 'in' の部分のeasingを指定します。
nullを指定した場合、easingの指定値に準じます。

デフォルトは null です。

切り替え効果のうち 'in' の部分のeasingを指定します。
nullを指定した場合、easingの指定値に準じます。

デフォルトは null です。

shuffleのアニメーション効果の幅を設定します。
例えば{top: 300, left: 200}と指定した場合、右下の方を廻ってシャッフルされるようになります。

切り替え効果の 'in' の部分を指定します。
独自のエフェクトを当てたい場合に用います。

切り替え効果の 'out' の部分を指定します。 独自のエフェクトを当てたい場合に用います。

切り替え効果の前半部分で当たるcssのプロパティを定義します。

切り替え効果の後半部分で当たるcssのプロパティを定義します。

切り替え効果を制御するための関数を設定します。

コンテナにあたる要素の高さを指定します。

デフォルトは 'auto' です。

先頭をゼロとして、スライド表示を開始する要素の番号を指定します。

デフォルトはゼロです。

切り替え効果の in/out を数珠繋ぎのように連続させたい場合は true を指定します。

デフォルトは true です。

trueを指定すると、画像の表示順をランダムにします。

デフォルトは false です。

スライド画像をコンテナ要素の大きさに強制的に揃えます。

デフォルトは false です。

trueを指定すると、マウスが乗った際に一時停止がかかるようになります。

デフォルトは false です。

スライドが最後まで行った際に、自動的に切り替えを停止します。

デフォルトは false です。

自動的に止まるまでの切り替え画像枚数を指定します。

デフォルトはゼロです。

最初の効果が始まるまでの待ち時間をミリ秒で指定します。
マイナス値を指定することで、開始を早めることも出来ます。

デフォルトはゼロです。

コンテナの子要素から、スライドに用いる画像を絞り込みたい場合に指定します。
セレクタの書式を用います。

デフォルトは null です。

InternetExplorer6のClearType問題に対処してくれます。

デフォルトは false です。

画像の最初と最後が繋がった状態にならなくなります。

デフォルトは false です。

公式サイトに多くのサンプルがあります。
いずれここでも紹介するかもしれませんが、是非参考にして下さい。