jQuery Cycle Pluginについて

jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）についてですが、
自動再生ではなく、クリックで動作させたいと思っています。


そこで、1番目の画像をクリックしたら、最後の画像まで順番にフェードし、
1番目に戻る。といったような動きは、可能でしょうか。

オプションの設定をみましたが、分からなかったので
ご存知の方がおられましたらお教え頂けないでしょうか。

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

No.1 回答者： my-- 回答日時： 2012/12/23 14:05

<script type="text/javascript">

$(document).ready(function () {
// 設定オプション
var opts = {
autostop: true, // 自動停止
autostopCount: 6, // 自動停止切り替え回数（切り替え要素数 + 1 で先頭停止）
// 自動停止でコールバック
end: function () {
obj.cycle('destroy'); // もろもろ削除
obj.cycle(opts); // オプションを渡してjQuery Cycle再設定
obj.cycle('pause'); // 一時停止
}
};

var obj = $('.slideshow'); // 対象jQueryオブジェクト
obj.cycle(opts); // オプションを渡してjQuery Cycle設定
obj.cycle('pause'); // 一時停止
// 先頭要素clickイベント
$('img:first', obj).click(function () {
obj.cycle('resume'); // 再始動
});
});
</script>


JQuery Cycle Plugin - Option Reference
http://jquery.malsup.com/cycle/options.html

この回答への補足

ご回答頂き大変ありがとうございます！

お教え頂いたとおりにやってみたら、思っていたとおりに動作しました！

説明も書いていただいてありがとうございます。

もう1点出来たらお教え頂きたいのですが、
これをページ内に複数設置したく同じクラス名で別々で動作させることは可能でしょうか？


いろいろコードをいじってみましが、
基礎的な事がまだ分かっておらず、わからず苦戦しております。

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

補足日時：2012/12/26 18:39

No.2 ベストアンサー 回答者： my-- 回答日時： 2012/12/27 14:08

(function ($) {

$.fn.myCycle = function (options) { // プラグインメソッド
// 設定オプション
var opts = $.extend({ autostop: true }, options); // autostop: trueは共通値
this.each(function () { // 複数jQuery Cycle設定
var obj = $(this); // 対象jQueryオブジェクト
var newOpts = $.extend({}, opts); // オプションコピー
newOpts.autostopCount = obj.find('img').length + 1; // 自動停止切り替え回数（切り替え要素数 + 1 で先頭停止）
// 自動停止でコールバック
newOpts.end = function () {
obj.cycle('destroy'); // もろもろ削除
obj.cycle(newOpts); // オプションを渡してjQuery Cycle再設定
obj.cycle('pause'); // 一時停止
};

obj.cycle(newOpts); // オプションを渡してjQuery Cycle設定
obj.cycle('pause'); // 一時停止
// 先頭要素clickイベント
$('img:first', obj).click(function () {
obj.cycle('resume'); // 再始動
});
});
return this;
};
})(jQuery);
// ここまでを適当な名前で保存（jquery.cycle.extend.js）


HTML
<!-- include jQuery library -->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<!-- 適当な名前で保存したjsファイル -->
<script type="text/javascript" src="jquery.cycle.extend.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').myCycle(); // プラグインメソッド呼出し
});
</script>


No.1を繰り返し処理しただけですけど、とりあえずこんな感じで。

この回答へのお礼

ご連絡が遅くなってしまい申し訳御座いません！

お教え頂いた方法で思っていたとおりに動作しました！
大変助かりました。感謝致します。

どうもありがとうございました！！

お礼日時：2013/01/08 19:24