jQueryのプラグイン「Skitter」について

質問

下記サイトで配布されているjQueryのプラグイン「Skitter」について、
質問させて下さい。
http://thiagosf.net/projects/jquery/skitter/

スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、
このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。

質問は、スライドショーが無限にループしてしまうのを、
最後の画像がきたところで、ストップさせる、
というカスタマイズが出来ないかという事です。

ファイルの中身を見たり、検索エンジンも使ってみましたが、
答えが見つけられず、思い切って質問してみました。

わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。
よろしくお願いしますm(_ _)m

回答No.1

muumiru02 · ベストアンサー

「最後の画像がきたところで、ストップさせる」というのは、一度だけ頭から順にアニメーションしていき、最後の画像で止まるようにしたいということでしょうか?

ナビゲーションとインデックスでの操作を不要とする場合です。

(以下、js/jquery.skitter.js)

1.24行目あたりにあるオプション変数に一度で打ち止めるかどうかを制御するオプションを追加
var defaults = {
/* ... */, // ,を忘れずに
once: false
}

2.66行目あたりにある skitter()に、最後の画像まで到達したかどうかを判定するフラグを追加し初期化しておく
$.skitter = function(obj, options, number) {
this.box_skitter = $(obj);
this.timer = null;
this.settings = $.extend({}, defaults, options || {});
this.number_skitter = number;
this.reached = false; // <- このコードを追加
this.setup();
};

3.1540行目あたりにある increasingImage()で到達フラグを立てるようにする
increasingImage: function()
{
this.settings.image_i++;
if (this.settings.image_i == this.settings.images_links.length) {
this.settings.image_i = 0;
if (this.settings.once) // <- このコードを追加
this.reached = true; // <- このコードを追加
}
}

4.1488行目あたりにある finishAnimation()内でアニメーションのループを止める
finishAnimation: function (options)
{
var self = this;
/* ... */

/* if (!this.settings.is_hover_box_skitter) { */
if (!this.settings.is_hover_box_skitter && !this.reached) { // <- 条件追加
this.timer = setTimeout(function() {
self.completeMove();
}, this.settings.interval);

/* ... */
}
}

skitter()を追加オブションをtrueに設定して呼び出します。デフォルトでは無効にしてあるので。
$('div').skitter({once: true});

上の修正だけだと一度終端まで行った後に、ナビゲーションやインデックスで画像を切り替えても自動で次の画像に切り替わりません。
ユーザーが画像を切り替えた場合にはスライドショーを再開させ、最後の画像が表示されたらまた停止するという動作であれば、以下のコードを追加してみて下さい。

1.290行め~のclickイベントハンドラ内で終端到達フラグをクリア(以下同様)
this.box_skitter.find('.prev_button').click(function() {
if (self.settings.is_animating == false) {
self.reached = false; // <- このコードを追加

2.317行め~
this.box_skitter.find('.next_button').click(function() {
if (self.settings.is_animating == false) {
self.reached = false; // <- このコードを追加

2.342行め~
this.box_skitter.find('.image_number').click(function(){
if ($(this).attr('class') != 'image_number image_number_select') {
if (self.settings.is_animating == false) {
self.reached = false; // <- このコードを追加

お礼

ご回答ありがとうございます。
ここまで詳しい回答が頂けるとは、正直思っていなくて、
大変おどろきつつも恐縮です・・・深く深く、感謝です。

>>「最後の画像がきたところで、ストップさせる」というのは、
>>一度だけ頭から順にアニメーションしていき、
>>最後の画像で止まるようにしたいということでしょうか?

その通りです！
早速、教えて頂いたコードで動作させてみたいと思います。

重ね重ね、、、貴重なご回答を頂きまして、
本当に、ありがとうございました。