質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Vegasを使用したスライドショー

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 935

TJMYK

score 48

解決したいこと

現在RubyOnRailsでスライドショーを作成しています。
専用のページで画像をアップロードし、JSONを動的に吐き出しています。
しかし、JSONを更新してもスライドショーに反映されません。

該当のソースコード

<script>

  slide_vegas();
  setInterval("slide_vegas()",1000);

  function slide_vegas(){
    $.ajax({
      type: "get",
      url: "http://127.0.0.1:3000/picture/slide.json",
      dataType: "json",
      success: function(data){
        $('body').vegas({
          transition: 'random',
          transitionDuration: 3000,
          delay: 10000,
          animation: 'random',
          animationDuration: 20000,
          shuffle: true, // シャッフル
          slides: data, //画像データJSON
          timer: false, //タイマー非表示
          overlay: '/overlays/05.png'}
        )
      }
    });
  }

</script>

試したこと

タイマーなどの使用方法はなんとか探し当てたのですが、JSONを何度更新してもできませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

  • Chromeを使用しています。
  • はじめのJSONに記載されているURL画像は、正しく表示され動作しますが、画面の更新をするまで新しく追加された画像が読み込まれません。
  • JSONは下のように増加します。加減する場合もあります。
    [{src: "https://*.s3-ap-northeast-1.amazonaws.com/image/da8beadb.JPG"},
    {src: "https://*.s3-ap-northeast-1.amazonaws.com/image/4399eb04.JPG"}]
    から
    [{src: "https://*.s3-ap-northeast-1.amazonaws.com/image/da8beadb.JPG"},
    {src: "https://*.s3-ap-northeast-1.amazonaws.com/image/4399eb04.JPG"},
    {src: "https://*.s3-ap-northeast-1.amazonaws.com/image/4399eij8.JPG"},
    {src: "https://*.s3-ap-northeast-1.amazonaws.com/image/ski8ug7r.JPG"}]
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

公式サイトに載っている方法で追加できそうな気がします。

success: function( data ){
    // ここから追加
    var $b = $( 'body' );
    if ( $b.hasClass( 'vegas-container' ) ) { // 2回目以降なら
        var slides = $b.vegas( 'options', 'slides' ); // いま有るスライドを取得
        slides = slides.concat( data ); // 配列を結合(JSONの内容に合わせてください)
        $b.vegas( 'options', 'slides', slides ); // スライドを再設定
        return; // successを終了する
    }
    // ここまで追加
    $('body').vegas({


【Methods - Documentation - Vegas Background SlideShow】
http://vegas.jaysalvat.com/documentation/methods/

$('a#add').on('click', function () {
    var slides = $elmt.vegas('options', 'slides');

    slides.push({ src:'/img/new-slide.jpg' });

    $elmt
        .vegas('options', 'slides', slides)
        .vegas('options', 'transition', 'slideDown')
        .vegas('jump',    slides.length - 1)
        .vegas('options', 'transition', 'slideLeft2');
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/22 02:30

    素早いご回答ありがとうございます。
    同じようにやってみましたが、更新されません。
    最初に書けばよかったのかもしれませんが、
    JSONの配列は、動的に増減します。その配列を基にスライドさせたいと思っていますが、この方法でも可能なのでしょうか。
    内容としては、

    [
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/da8beadb.JPG"
    },
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/4399eb04.JPG"
    }
    ]

    から

    [
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/da8beadb.JPG"
    },
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/4399eb04.JPG"
    },
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/4399eij8.JPG"
    },
    {
    src: "https://*****.s3-ap-northeast-1.amazonaws.com/image/ski8ug7r.JPG"
    }
    ]

    と増加していく感じです。

    キャンセル

  • 2016/05/22 02:43

    bodyに「vegas-container」というスタイルは付きますか?付かなかったら別の方法で2回目を検知して下さい。

    > 動的に増減します。
    増えていくなら
    $b.vegas( 'options', 'slides', data );
    でいいと思います。

    また、試される場合はデベロッパーツールなどでエラーなどが起きたかも連絡していただければと思います。

    あと、コメントに書かれている内容(JSON)は他の回答者に見やすいように質問文に追記される事をお勧めします。

    キャンセル

  • 2016/05/22 02:49 編集

    ご回答ありがとうございます。
    デベロッパーツールでは現在のところエラーは起きていません。
    vegas-containerはついているようです。
    動作も変わらずでした。今のアドバイスをもとにもう少し探ってみます。
    本当に有難うございます。また何かありましたら、報告いたします。

    JSONは、今後質問文に追記するようにします。

    キャンセル

  • 2016/05/22 03:25

    あと、「setInterval("slide_vegas()",1000);」が極端に間隔が短いため、「delay: 10000,」が終わるまでに10回も書き換え(リセット)動作を行うことになるので、setIntervalは長めでテストしてみてはいかがでしょう。

    キャンセル

  • 2016/05/22 03:40

    アドバイスありがとうございます。長くしてみました。
    デベロッパーツールで各所にconsole.logで確認してみたところ、画面動作中にJSONのデータ変更したところ、data変数内部はしっかりと増減に追従していましたが、
    kei344 さんにご教授頂いた内容を入れたところ、画像を追加しても2回目以降のログが吐かれませんでした。
    該当挿入箇所は以下の通りです。
    shuffle: true, // シャッフル
    slides: data, //画像データJSON
    timer: false, //タイマー非表示
    overlay: '/overlays/05.png'}
    );
    console.log(data);

    何か他に探り当てるところがありましたらご教授願えれば幸いです。

    キャンセル

  • 2016/05/22 05:52

    ありがとうございます。解決しました!
    var $b = $( 'body' );
    if ( $b.hasClass( 'vegas-container' ) ) { // 2回目以降なら
    $b.vegas( 'options', 'slides', data ); // スライドを再設定
    }

    とすることでリアルタイムに増減が可能でした。
    アドバイス本当にありがとうございました!
    とてもすっきりしました。このツールが成功するように頑張ります

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。