シンプルな画像ギャラリーに使えるjQueryプラグインをつくってみた

  • 2011/02/14

jQueryプラグイン jQuery crossFader

盆栽教室のサイトを制作した際に、画像ギャラリーを作る必要があったので、せっかくなのでjQueryプラグイン化してみた。

フェードイン・フェードアウトするだけのシンプルな動きなので、さっと設置したい時には便利かも。ということで、さっそく解説。

jQuery crossFader

フェードイン・フェードアウトで画像を表示するjQueryプラグイン。画像をクリックすると次の画像へ遷移します。

更新履歴
  • [2013.09.24] ver0.4 フェードの手動開始オプションを追加
  • [2012.07.04] ver0.3 クリック時の切替処理無効化オプションを追加
  • [2011.03.17] ver0.2 ループ制御用オプションを追加
  • [2011.02.14] ver0.1 リリース
準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

ギャラリー部分のid(id-of-crossfader)を指定し、クロスフェードを実行。

HTML(画像のみの場合)

CSSを適用するため、画像の親要素(ここでは<div>)にclass="crossfader"を付与してください。
JavaScriptオフの環境では、class="active"を付与した画像が表示されます。

HTML(リンクを設定する場合)

オプション
オプション項目 デフォルト値 内容
timer 6000 切替までの待機時間 [単位:ミリ秒]
speed 1500 遷移速度(待機時間timer経過時) [単位:ミリ秒]
changeSpd 800 遷移速度(画像クリック時) [単位:ミリ秒]
clickStep true クリック時の切替処理を有効(true) or 無効(false)
autoStart true フェードを自動開始(true) or 手動開始(false)
random false 画像をランダム表示する(true) or しない(false)
loop true 画像をループさせる(true) or させない(false)
オプション指定方法
ライセンス

MITライセンスでの配布となります。

jQuery crossFader