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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

リサイズ

コントロール、ウィンドウ、フォームやスクリーンのサイズ変更を指します。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4165閲覧

Vegas2で一定以下の横幅へのリサイズを条件に画像を変更したい

Euri_K

総合スコア32

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

リサイズ

コントロール、ウィンドウ、フォームやスクリーンのサイズ変更を指します。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/11/08 11:48

スマホ対応で一定の横幅を割ると設定したスライド画像が変わるようにしたい

vegas.jsを利用して全画面スライドショーを背景に敷いたサイトデザインを作っています。
この時、ウィンドウ幅によって読み込む背景画像を変更するようにしたいと考えています。
端末を判別する形であれば、最初の発火自体を端末判別後にif文で振ってやればいいのですが、
ウィンドウのリサイズにも反応する形を求められています。

発生している問題・やってみたこと

他のJqueryスライドショー「nivoslider」や「bxSlider」では
発火するスクリプトを2回書くことで参照画像の上書きが可能だったため、
今回も同じものを2回書いたら上書きできるのではと考えてみたものの
駄目でした。

該当のソースコード

Javascript(jQuery)

1 2$(function() { 3 $('#vegas').vegas({ 4 delay: 10000, 5 slides: [ 6 { src: 'common/images/mv_01.jpg' }, 7 { src: 'common/images/mv_02.jpg' }, 8 { src: 'common/images/mv_03.jpg' }, 9 { src: 'common/images/mv_04.jpg' }, 10 { src: 'common/images/mv_05.jpg' } 11 ], 12 overlay: 'common/js/vegas/overlays/07.png', 13 transition: 'blur', 14 transitionDuration :3000 15 }); 16}); 17 18 19$(window).resize(function() { 20wi = $(window).width(); 21 22if(wi <= 640){ 23$(function() { 24 $('#vegas').vegas({ 25 delay: 10000, 26 slides: [ 27 { src: 'common/images/mv_01_sp.jpg' }, 28 { src: 'common/images/mv_02_sp.jpg' }, 29 { src: 'common/images/mv_03_sp.jpg' }, 30 { src: 'common/images/mv_04_sp.jpg' }, 31 { src: 'common/images/mv_05_sp.jpg' } 32 ], 33 overlay: 'common/js/vegas/overlays/07.png', 34 transition: 'blur', 35 transitionDuration :3000 36 }); 37}); 38 39 }; 40 41});

どなたかご教授よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

vegas.js は使ったことがないのですが、ドキュメントを見る限りオプションで slides を変更することができるようです。
具体的には、if(wi <= 640) の中の vegas を使っている部分を

javascript

1$('#vegas').vegas('options', 'slides', [ 2 { src: 'common/images/mv_01_sp.jpg' }, 3 { src: 'common/images/mv_02_sp.jpg' }, 4 { src: 'common/images/mv_03_sp.jpg' }, 5 { src: 'common/images/mv_04_sp.jpg' }, 6 { src: 'common/images/mv_05_sp.jpg' } 7]);

に書き換えてみてください。

投稿2019/11/09 01:49

2KOH

総合スコア999

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

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

Euri_K

2019/11/11 01:27

ありがとうございます。こちら、問題なく動作しました。 マニュアルには一通り目を通していたつもりですが見逃していたようです。 レスポンシブサイトに使えるかどうかという点で導入に躊躇っていたため大変助かりました。 そして、こちらは別の問題なのですが、 挙動としては表示候補の画像リストが変わるだけで、 今表示しているものは画像が変わらないようです。 そっちはそっちで解決する必要がありますが、 質問の主題とは異なるので一旦ベストアンサーとしてスレッドを終了します。 重ねて感謝いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問