概要

複数の画像をフェードで切り替えて表示するプラグインです。余分な機能は一切ありません。

画像がふわふわ切り替わるところをクリックしたらギャラリーのページに移動するような感じの使い方を想定しています。

ダウンロード

基本的な使い方

画像に対して、差し替えて表示してゆく画像を配列で指定します。元の画像も、自動で表示画像リストの先頭へ追加されます。

<img src="image01.jpg" />

$(elem).gpFadeImage([
  'image02.jpg',
  'image03.jpg',
  'image04.jpg'
]);

デモ

デモ1 : 基本的なもの


Demo 1

  • 画像がフェードして切り替わります。

デモ2 : ギャラリーへの入り口風


Demo 2

  • 画像がリンクになっています。
  • マウスカーソルを載せるとロゴと文章を表示します。（gpFadeImageの機能ではありません。）
  • リンク先がギャラリーのページになっています。

画像とリンク先はmofblancより。なお直接問い合わせて、この利用法に問題ない事は確認済みです。

リファレンス

.gpFadeImage(srcList)

  • srcList … {Array} 元画像以外に表示する画像のURL。{src: srcList}とした場合と同様。

.gpFadeImage([settings])

  • settings … {Object} 設定。以下のキーと値を持てる:
    • duration … {Number} フェードする長さ。単位はms。初期値は1000。
    • interval … {Number} 画像を切り替える間隔。単位はms。初期値は2000。
    • src … {Array} 元画像以外に表示する画像のURL。

gpfadeimage-wrapperクラス

指定の画像を包むspan要素（自動生成）に与えられるクラス名。

その他

ライセンス

  • MIT License
    • 無償で利用できます。
    • 転載や改造、再配布が可能です。
    • コード内に記載の著作権表示は変更できません。
    • どのような問題が発生しても、一切の保証はありません。

利用時に連絡は不要ですが、もしご連絡頂ければ、利用実績として掲載させて頂くかもしれません。

対応ブラウザー

  • IE 6+
  • Firefox
  • Chrome
  • Safari
  • Opera

リポジトリ

更新履歴

2012/01/20 – 1.0
  • 公開