jQuery Cycle Pluginについて

質問

jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）を使用して、8枚の画像を次々と表示するスライドショーを実装しました。

1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。

知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。

どうぞ宜しくお願いいたします。

回答No.5

Taiyonoshizuku · ベストアンサー

さらっと見た感じだとoptionにbeforeっていうコールバック関数を指定できるから、そこで現在の枚数を取得して
8枚目になったらSkipボタンを非表示とかすればまずは消せると思う。

んでSkipボタンのclickで最後のスライドに行けばいいんだけど、nextとprevはあっても先頭に戻るとか一番後ろとかは無い気がする。

function handleArguments

ここの中が外から呼べるメソッドの定義だから
case 'last'
を追加して
最後の画像を表示、そしてstopするように作ればいいんじゃないかな？

$('#skip').click(function(){
$('#slide').cycle('last');
});
みたいな感じ

お礼

ご回答頂きありがとうございました。
教えて頂いた内容で「8枚目になったらSkipボタンを非表示」とSkipボタンをclickした際の処理で「Skipボタンを非表示」はできましたが、どうしても最後の画像を表示することができません。

1番目から7番目までを.hideと非表示にして、8番目を.showで表示させるように処理を"last"に記載したりしているのですが8番目が表示されません。やり方を間違えておりますでしょうか。8番目の画像を表示するヒントを頂けませんでしょうか。

補足

2週間経ってしまいましたが、無事出来ました。教えて頂きまして本当にありがとうございました。

回答No.4

Taiyonoshizuku

何度もごめん。

ボタンどこに表示したいの？たぶん画像の表示エリアはきっちきちでエフェクトかかるから、
外に置くとか工夫しないと、ｃｓｓとかかなりいじることになると思う。

お礼

ご回答頂き、ありがとうございます。
画像の表示エリアの下にdivを配置し、その中にskipボタンを配置しています。

現在はjquery.cycle.all.js内のnextとonPrevNextEventの処理をいじってどうにかできないかを試行錯誤しております。

回答No.3

Taiyonoshizuku

あ、ごめん。
本体いじってみたんだね。

回答No.2

Taiyonoshizuku

全然見れてないけど、オプションじゃなくってプラグイン本体をいじらないとだめじゃないかな。
ボタン表示したりとかしないといけないなら。

回答No.1

Taiyonoshizuku

pluginをカスタマイズすればいいとおもうけど、解析できる？

お礼

ご回答頂きありがとうございます。
オプションのnextの処理の内容を変更してできないかjquery.cycle.all.js内の記載をいじってみましたが無反応でした。

どこをカスタマイズすれば良いか教えて頂けませんでしょうか。

また、Skip処理とは関係ございませんが、画像のスライドは下記の様に設定しています。

$(function() {
$('div#sample').cycle({
autostop: true,
timeoutFn: function(currSlideElement, nextSlideElement, options, forwardFlag) {
　　var effectList = new Array('turnLeft', 'turnRight', 'turnDown', 'turnUp', 'fadeZoom', 'zoom', 'fade');
　　options.fx = effectList[options.currSlide];
var timeouts = [0,2,2,2,2,2,2];
var index = options.currSlide;
if (index == 0 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 1 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 2 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 3 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 4 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 5 ) {
options.speedIn = 2000;
options.speedOut = 2000;
} else if( index == 6 ) {
options.speedIn = 12000;
options.speedOut = 12000;
} else {
options.speedIn = 0;
options.speedOut = 0;
}

return timeouts[index] * 500;
}
});
});