• ベストアンサー
  • すぐに回答を!

jQuery Cycle Pluginについて

jQuery Cycle Plugin(http://jquery.malsup.com/cycle/)についてですが、 自動再生ではなく、クリックで動作させたいと思っています。 そこで、1番目の画像をクリックしたら、最後の画像まで順番にフェードし、 1番目に戻る。といったような動きは、可能でしょうか。 オプションの設定をみましたが、分からなかったので ご存知の方がおられましたらお教え頂けないでしょうか。 どうぞ宜しくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数588
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.2
  • my--
  • ベストアンサー率89% (91/102)

(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を繰り返し処理しただけですけど、とりあえずこんな感じで。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご連絡が遅くなってしまい申し訳御座いません! お教え頂いた方法で思っていたとおりに動作しました! 大変助かりました。感謝致します。 どうもありがとうございました!!

関連するQ&A

  • jQuery Cycle Pluginについて

    jQuery Cycle Plugin(http://jquery.malsup.com/cycle/)を使用して、8枚の画像を次々と表示するスライドショーを実装しました。 1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。 知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。 どうぞ宜しくお願いいたします。

  • jQuery Cycle Pluginについて

    JavaScriptで、右から左に自動で画像が流れるスライドショーを表現するために、 現在いろいろなプラグイン等を見ています。 その中に、「jQuery Cycle Plugin」というのがあったのですが、 こちらのサイトに行き all となっているファイルのダウンロードを するために対象のリンクをクリックすると、なぜか403エラーになってしまいます。 こちらはすでに配布を終了してしまった、ということなのでしょうか? 試しにと思い、同じページにあるLite Pluginを設置しても、 私の望む動きは得られませんでした。 同じようなプラグインを使用中の皆様、どうかご意見やご指摘、アドバイスをいただけないでしょうか? ※ちなみに、正常に動いているサイトさんでは、jQueryは1.2.6を、 ※「jQuery Cycle Plugin」のallを使用していました。

  • jQuery Cycle Pluginで表示時間を

    jQuery Cycle Pluginで4枚の画像をフェードで切り替えて順に表示するものを作っています。 そこでできることなら各画像の表示時間(timeoutの部分)をそれぞれで変えたいのですが、そのような方法はあるのでしょうか? (フェードの時間(speed)は一定で構いません) 1枚目……………1秒表示     ↓(フェード1秒) 2枚目……………4秒表示     ↓(フェード1秒) 3枚目……………2秒表示     ↓(フェード1秒) 4枚目……………1秒表示(ここで停止なので厳密には秒数は関係なし) 以下のJavaScriptでは表示時間をそれぞれ変えることが可能のようなのですが、 こちらはフェード機能がないようでして…。 http://attosoft.info/blog/release-animate-image-js/ Cycle Pluginにこだわっているわけではありませんので、他の方法で実現可能なものがあれば 教えていただないでしょうか? ※実装しなければならない条件  ・切り替え方法はフェード  ・リピートしない(4枚目で止まる)  ・各画像の表示時間をそれぞれで変える ←←←これを追加したい ※その他の条件  ・HTML 4.01 Transitional  ・IE6でも表示可能  ・Flash使用不可 よろしくお願いします。

その他の回答 (1)

  • 回答No.1
  • my--
  • ベストアンサー率89% (91/102)

<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点出来たらお教え頂きたいのですが、 これをページ内に複数設置したく同じクラス名で別々で動作させることは可能でしょうか? いろいろコードをいじってみましが、 基礎的な事がまだ分かっておらず、わからず苦戦しております。 どうぞ宜しくお願いいたします。

関連するQ&A

  • jQuery Cycle Plugin についての質問です。

    jQuery Cycle Plugin についての質問です。 ▼プログラムについて jQuery Cycle Plugin (http://www.malsup.com/jquery/cycle/) ▼利用したい機能 Advanced Demos (Part 1) (http://www.malsup.com/jquery/cycle/adv.html) 上記サイトの「Advanced Demos (Part 1)」と同じように設定しようとしています。 とりあえず、FIrefox(Ver.3.3.6)とIE(Ver.8以降)では正常に動作しています。 ▼動作しているテスト用アドレス http://check.we-dok.jp/jq_cycle/cycle_test_01.html これを、IEのVer.6または、Ver.7で表示すると、スクリプトエラーがでてしまいます。 よくわからないのですが、 恐らく、ヘッダー内に記述している以下の部分が悪いと思うのですが、 本家サイトのコードを見たり、いろいろいじってみたのですが、自己解決できません。 <script type="text/javascript"> $(document).ready(function() { $('.pics').cycle({ fx:'scrollDown', speedIn: 2000, speedOut: 500, easeIn: 'bounceout', easeOut: 'backin', delay: -2000, pause: 1, }); }); お詳しい方、どこが悪いのか是非、 ご教授くださいますようお願いいたします。

  • jQuery UI Accordion Plugin(jQuery U

    jQuery UI Accordion Plugin(jQuery UI アコーディオン プラグイン)でアコーディオンメニューを作っています。 下記のような要素を ↓html <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> プラグインを読み込んで ↓javascript $("#accordion").accordion(); みたいな簡単な記述でアコーディオンメニューが実装できます。 サンプルURL:http://jquery.bassistance.de/accordion/demo/ これを自動で上から順に一定間隔で展開するようにしたいのですが(クリックして展開する動作も生きで)、 動きイメージ:http://www.au.kddi.com/ aubyKDDIサイトの左側のメニュ↑ このプラグインを使わないやり方とかでもいいです。 ご教授の程お願いいたします。

  • jQueryスライドプラグイン

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか? http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • 【jquery】自動再生するスライドショー

    jquery プラグインで、  ○自動再生するスライドショーで、  ○画像に対して、hover イベントで再生を一時停止できる  ○左右の方向ボタン(「<」「 >」 )で再生方向をコントロールできる ものを探してます。 自動再生の動きは、 http://logicbox.net/jquery/simplyscroll/ がベストなんですが、このプラグインは、自動再生モードでは、 方向をコントロールするボタンを表示できないのです。 上記の条件に合致するものを、誰かご存知ないでしょうか? あるいは、上記のプラグインで、自動再生しながら、左右の方向ボタンを表示し、 ボタンをクリック、もしくは hover することで、方向を反転させられるように するにはどうすればいいでしょうか。 詳しい方、よろしくお願いいたします。

  • jQueryスライドショーの設定

    http://slidesjs.com/ Slides, A Slideshow Plugin for jQuery ここのjqueryを使って、左右の矢印(← →)をクリックすると div要素が順番に入れ替わっていくというものを導入しました。 そこで、例えばdivが3つあったとして、 1が表示されているときに→を押すと、当然2に行きますが 3が表示されているときに→を押すと、スクロール自体は右にスクロールしているのに 1が表示されてループしてしまいます。 そこで、3が表示されているときは、→をクリックしても1に行かない、 そもそも→はクリックできず、←しかクリックできない状態にしたいのです。 矢印は消えなくていいです。 うまくストップさせることはできないでしょうか

  • jqueryを使用したギャラリー

    http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm 上記URLを利用しているのですが自動再生をtrueにすると1番最初の画像で停止してしまいます。 希望としては自動で画像の切り替えを行い最後の画像であれば停止させたいのですがオプション 設定で可能なものでしょうか? ドキュメントを読んでみたのですが英文で全く理解できない状態です。 また、サムネイルや再生ボタン等は必要ないので指定のdiv内にフェードインフェードアウトで 画像の切り替えができるものがありましたら教えてください!

  • JQueryのスライドショーを停止させたい

    サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止(ループさせない)ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか? http://vegas.jaysalvat.com/ (SLIDE SHOWを利用しています。) よろしくおねがいします。

  • ページ遷移時にスライドするjQuery(Ajax)

    クリックして、ページを遷移した際にスライドで表示してくれるjQueryを探しています。 詳細はサイトをご参照の上、下記の文言をご確認ください。(サイト内右側のSOLUZIONIをクリックしてください) http://www.galvanmobili.it/ 上記URLのサイトのように複雑な動きはいりません。 単純に横にスライドしたいです。  A B と表示されていて、Bをクリックすると ←B C とスライドで表示ができるようにしたいです。 Cを画像にしてスライドショーとして使用するのではなく、あくまでページが遷移して欲しいです。 参考サイトのようにCは下にスクロールすることができます。 検索してみたのですが、スライド前に一度フェードで切り替わったりするjQueryが多かったので、プラグインの名前や参考サイト等知っている方いらっしゃれば教えて下さい。

    • 締切済み
    • CSS
  • (JQuery)スライダーのサンプル探しています

    jquery初心者です・・。 クライアントからの要望がありましたので(http://shop.benesse.ne.jp/ )のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・! 何卒よろしくお願いいたします・・・!

    • ベストアンサー
    • CSS
  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。