** はじめに [#dfbd9cb5]
こんにちは、[[竹村]]です。
最近、jCarouselLite の利用頻度の高くなってきています。
jCarouselLite は、表示エリアが限られている場所で多くの画像バナーを表示できるウィジェットです。
下記のようなものです。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/normal.html
#ref(sample_nomal.jpg,nolink,左右のボタンをクリックすると画像バナーがスクロールして表示されている)
jCarouselLiteの公式サイト：http://gmarwaha.com/jquery/jcarousellite/
jCarouselLite は画像バナーを指定した秒数待ってから自動的にスクロールする機能があります。
これによって、ボタンを押さなくてもループ再生されるのでアクティブ感が得られるのは良いのですが、
''自動的にループ再生できるくせに、停止や再スタートの機能がありません。''
これでは、JIS X 8341-3:2009 7.2.2.2 (WCAG 2.0 2.2.2, 2.2.3)に適用できないため、改修しました。
現在は、githubからダウンロードできるようにしています。
http://github.com/tiadeen2/jCarouselLite_auto_controller
#blikimore
** 目次 [#b79c4176]
#contents
** なぜ jCarousel を使わない? [#g38c9b22]
autoの停止/再スタートは実は jCarousel (http://sorgalla.com/jcarousel/ ) に実装してあります。
…が、なぜ jCarousel を使わないで、jCarouselLite にこだわるか、というと''既に jCarouselLite を使って実装したサイトがあるから'' です。
jCarouselLiteは jCarouselより導入が簡単です。よって、既に実装済みのものをリプレイスするよりは
機能の差分をプラスした方がやり易いと判断しました。
** インストール方法 [#t21c4241]
- jCarouselLiteと同じです。Option が増えただけという認識でOKです。
** 追加したOption [#n463583f]
4つ追加してあります。
- btnStart, btnStop :
停止/再生ボタンのElement名を指定する。autoオプションがnullでなければ、自動的にbtnStartを押した挙動となる。
- afterStop, afterStart :
停止/再生ボタンが実行された時に呼び出されるコールバック関数を指定しておける。
btnStart, btnStop は、btnPrev, btnNext と同じように「Element名」を指定します。
afterStop, afterStart は、afterEnd と同じように「停止時、再生時に呼び出されるコールバック関数」を指定します。
** サンプル [#qac7fc5b]
このコールバック関数で、再生ボタンを停止ボタンに差し替えたりすることができます。
下記のような感じです。
<script type="text/javascript">
$(".jcarousellite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 1000,
btnStart: ".start",
btnStop: ".stop",
afterStart: function() {
jQuery(".start").css("display", "block");
jQuery(".stop").css("display", "none");
$(".start").css("display", "none");
$(".stop").css("display", "block");
},
afterStop: function() {
jQuery(".start").css("display", "block");
jQuery(".stop").css("display", "none");
$(".start").css("display", "block");
$(".stop").css("display", "none");
}
});
</script>
：
<style type="text/css">
.start {display:none}
</style>
：
<div class="jcarousellite">
<div class="controller">
<button class="prev">前へ</button>
<button class="stop">停止</button>
<button class="start">再生</button>
<button class="next">次へ</button>
</div>
<div class="carousel">
<ul>
<li><img src="example1.jpg" alt="example1" /></li>
<li><img src="example2.jpg" alt="example2" /></li>
<li><img src="example3.jpg" alt="example3" /></li>
</ul>
</div>
</div>
- 最初は再生ボタンが表示されないようにCSS上で .start を非表示にしています。
- afterStart, afterStop のコールバック関数で表示/非表示を入れ替えています。
上記コードの実際のサンプルは↓こちらにあります。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/
#ref(sample_acc.jpg,nolink,停止ボタンをクリックすると自動スクロールが止まり、手動で前後ボタンをクリックしても、停止中は自動スクロールにはなりません。再度自動スクロールにするには、再生ボタンをクリックします。)
** ダウンロード [#ya1fa04c]
上記に書きましたが、githubからダウンロードできるようにしています。
http://github.com/tiadeen2/jCarouselLite_auto_controller
** さいごに [#m901912c]
今回の実装にはWAI-ARIAへの対応などは含まれていません。
実装のアラを探せば色々あると思いますが、ちょっとずつ対応して、
それを公開していければと思っています。
#blikifooter(竹村)
Tag: [[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]
