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”などを設定して非表示にしておくと良いでしょう。

オプション

fx

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

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

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

timeout

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

デフォルトは 4000 です。

continuous

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

デフォルトは 0 です。

speed

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

デフォルトは 1000 です。

speedIn

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

デフォルトは null です。

speedOut

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

デフォルトは null です。

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

デフォルトは null です。

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

デフォルトは null です。

prevNextClick

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

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

pager

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

デフォルトは null です。

pagerClick

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

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

pagerAnchorBuilder

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

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

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

before

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

after

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

end

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

easing

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

デフォルトは null です。

easeIn

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

デフォルトは null です。

easeOut

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

デフォルトは null です。

shuffle

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

animIn

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

animOut

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

cssBefore

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

cssAfter

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

fxFn

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

height

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

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

startingSlide

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

デフォルトはゼロです。

sync

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

デフォルトは true です。

random

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

デフォルトは false です。

fit

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

デフォルトは false です。

pause

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

デフォルトは false です。

autostop

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

デフォルトは false です。

autostopCount

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

デフォルトはゼロです。

delay

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

デフォルトはゼロです。

slideExpr

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

デフォルトは null です。

cleartype

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

デフォルトは false です。

nowrap

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

デフォルトは false です。

サンプル

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

最終更新: Y/m/d H:i