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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Ruby on Rails 4

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

Q&A

解決済

1回答

3366閲覧

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

TJMYK

総合スコア82

JavaScript

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

Ruby on Rails 4

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

0グッド

1クリップ

投稿2016/05/21 16:46

編集2016/05/21 17:55

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

###該当のソースコード

JavaScript

1<script> 2 3 slide_vegas(); 4 setInterval("slide_vegas()",1000); 5 6 function slide_vegas(){ 7 $.ajax({ 8 type: "get", 9 url: "http://127.0.0.1:3000/picture/slide.json", 10 dataType: "json", 11 success: function(data){ 12 $('body').vegas({ 13 transition: 'random', 14 transitionDuration: 3000, 15 delay: 10000, 16 animation: 'random', 17 animationDuration: 20000, 18 shuffle: true, // シャッフル 19 slides: data, //画像データJSON 20 timer: false, //タイマー非表示 21 overlay: '/overlays/05.png'} 22 ) 23 } 24 }); 25 } 26 27</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"}]

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

JavaScript

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

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

JavaScript

1$('a#add').on('click', function () { 2 var slides = $elmt.vegas('options', 'slides'); 3 4 slides.push({ src:'/img/new-slide.jpg' }); 5 6 $elmt 7 .vegas('options', 'slides', slides) 8 .vegas('options', 'transition', 'slideDown') 9 .vegas('jump', slides.length - 1) 10 .vegas('options', 'transition', 'slideLeft2'); 11});

投稿2016/05/21 17:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TJMYK

2016/05/21 17: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" } ] と増加していく感じです。
kei344

2016/05/21 17:43

bodyに「vegas-container」というスタイルは付きますか?付かなかったら別の方法で2回目を検知して下さい。 > 動的に増減します。 増えていくなら $b.vegas( 'options', 'slides', data ); でいいと思います。 また、試される場合はデベロッパーツールなどでエラーなどが起きたかも連絡していただければと思います。 あと、コメントに書かれている内容(JSON)は他の回答者に見やすいように質問文に追記される事をお勧めします。
TJMYK

2016/05/21 17:53 編集

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

2016/05/21 18:25

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

2016/05/21 18:40

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

2016/05/21 20:52

ありがとうございます。解決しました! var $b = $( 'body' ); if ( $b.hasClass( 'vegas-container' ) ) { // 2回目以降なら $b.vegas( 'options', 'slides', data ); // スライドを再設定 } とすることでリアルタイムに増減が可能でした。 アドバイス本当にありがとうございました! とてもすっきりしました。このツールが成功するように頑張ります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問