• ベストアンサー
  • 困ってます

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

下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m

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

  • 回答数1
  • 閲覧数2544
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.1

「最後の画像がきたところで、ストップさせる」というのは、一度だけ頭から順にアニメーションしていき、最後の画像で止まるようにしたいということでしょうか? ナビゲーションとインデックスでの操作を不要とする場合です。 (以下、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; // <- このコードを追加

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

質問者からのお礼

ご回答ありがとうございます。 ここまで詳しい回答が頂けるとは、正直思っていなくて、 大変おどろきつつも恐縮です・・・深く深く、感謝です。 >>「最後の画像がきたところで、ストップさせる」というのは、 >>一度だけ頭から順にアニメーションしていき、 >>最後の画像で止まるようにしたいということでしょうか? その通りです! 早速、教えて頂いたコードで動作させてみたいと思います。 重ね重ね、、、貴重なご回答を頂きまして、 本当に、ありがとうございました。

関連するQ&A

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

    jQueryのプラグイン「Skitter」の表示で、thumbsの表示で質問させてください。 http://thiagosf.net/projects/jquery/skitter/ 表示には「Numbers」「Dots」「thumbs」の3種類あり、「thumbs」でサイト作りをしているのですが、 「Numbers」「Dots」では表示されるlabelが、「thumbs」では表示されず、困っています。 javascriptの設定は下記のようにしています。 <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({thumbs: true, label: true}); }); </script> labelを表示するかしないかで、“label: true”にしているのですが、これでは表示されません。 オプションを見ても、そのあたりの記載が見当たらず、どこを調整すればいいのか分らずにいます。 どなたかご存知の方、いらっしゃいましたらご教授をお願い致します。m(__)m

  • jqueryスライドショーについて

    貴重な場をお借りして質問させていただきます。 jqueryでスライドショーを自作したいとおもっておりまして、 下記のようなスライドショーを実装したいとおもっております。 http://aviathemes.com/aviaslider/index.html この左上からパラパラ変わっていくアニメーションはどのような 原理で動いているか教えて頂けませんでしょうか。 調べてもよくわからず困っております。 大変申し訳ございませんがお詳しい方お力を貸して頂けませんでしょうか。 宜しくお願い致します。

  • jQueryプラグイン「Moodular」について

    jQueryプラグイン「Moodular」を改造して利用しています。 http://www.gougouzian.fr/projects/jquery/moodular/ 特定の要素を横(縦)にスクロールさせるスクリプトですが 修正するにあたり自分ではわからなかったので質問させていただきます。 要素が移動・停止を繰り返す際に微妙に減速、加速をおこなっているのですが これをとっぱらい、常に一定の速度でスクロールさせたいと考えています。 スクリプトを自分でいじってみましたが、思うように動きませんでした。 どなたか教えていただけないでしょうか?

  • スライドショー「Skitter」をカスタムしたい

    「Skitter」というJavascriptのスライドショーを少しカスタムして使おうと思い、 コードを見ていろいろ試したのですが、うまくいきません。 ▼「Skitter」元はこちらです http://thiagosf.net/projects/jquery/skitter/ ナビゲーションのタイプを「Numbers」「Thumbs」「Dots」の3種類から選べるようになっていて、私は「Thumbs」と言うサムネイルが表示されるタイプを選びました。 さらにサムネイルのサイズを小さく(80px x 50px)したくて、 「skitter.styles.css」や「jquery.skitter.js」のここかな、と思う箇所を 端から変更して表示を試してみてるのですが、意図したサイズになかなかなってくれません。 過去の質問やネットにはサイズ変更に関する記事は見つけることができませんでした。 どこをいじれば良いのでしょうか? わかる方いらっしゃいましたら、教えて頂けませんでしょうか? どうぞよろしくお願い致します。

  • ■jQuery「Galleria」のカスタマイズ

    どうぞ宜しくお願いいたします。 jQueryプラグインの「Galleria」を使用して、 写真のスライドショーを作成しています。 Galleria http://galleria.io/ ※下記からダウンロードできる、無料のものを使用しています http://galleria.io/download/ 自動でスライドショーが流れるように Galleriaのオプションを「autoplay: 6000」と秒数を設定しているのですが、 最後の写真が表示された後、最初の写真に戻ってしまいます。 これを、最後の写真が表示された後はループさせず、 スライドショーを停止させたいのです。 もしかしたらGalleriaにはそのようなオプションが無いかもしれないのですが、 カスタマイズでループさせないようにできましたら どのように変更すれば良いか教えていただきたいです。 よろしくお願いいたします。

  • jQueryのスライドショーのカスタマイズについて

    仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。

  • jQuery Cycle Pluginについて

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

  • jQueryの基本的なことについて教えてください

    自サイトで 「jQuery Slider&#178;」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 (google chrome、IE8で見ています) 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか? それとも、このプラグインに限ってはxhtmlなのでしょうか? よろしくお願いいたします。

  • jquery-1.3.2⇒○ 1.6.4.⇒エラー

    初心者ですすいません。 美しいエフェクトのデモがあったので、実装してみるも、エラーが止まらず。 (コードは基本的にコピペしました) jquery-1.6.4.min.jsをjquery-1.3.2.min.jsに直したら止まりました。 (デモ解説では、jquery-1.3.2.min.jsになっていたので・・・・) 質問 なるべく新しいjquery-1.6.4.min.jsを使用してきたいのですが、jquery-1.3.2.min.js用に制作されたコードを使っていくにはどうしたらいいでしょうか?(いちいち、1.6.4と1.3.2の両方を<head>&#65374;</head>間に記載しなければいけないでしょうか?)

    • ベストアンサー
    • AJAX
  • jQuery:マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ================================== 1)メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 (スライドショーはなし) 2)メイン画像にはテキスト(説明文)も入れられる 3)メイン画像の下には、サムネイル画像も表示できる ================================== 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS