###前提・実現したいこと
初めて質問します。
当方初心者のwebデザイナーで、コードについてはHTMLとCSSがようやくわかってきた程度です。
恥ずかしながら勉強が追いついていない、javascriptについての質問をさせてください。
現在、HTML5とCSS3をメインにwebサイトを作っています。
画像をフラッシュのように動的に切り替える要望に応えるため、初めてjavascriptの
ライブラリ(transm.js)を使用しています。
つまづいているのは、このjavascriptで制御している画像のレスポンシブ対応です。
###発生している問題
ウィンドウ幅に画像サイズを合わせるため、ウィンドウ幅によってjsファイルを呼び変える
コードをどこに書けばいいのかを知りたいです。
自分なりにネット検索で調べたところ、画像サイズを指定しているjsファイルを2つ追加
(PC、タブレット、スマホで切り替える為)し、ウィンドウ幅に合わせて呼び替えるという
方法にたどり着きました。
スニペットも上げてくださっている方がおりましたので、以下の通り拝借したのですが、
これをどのファイルのどこに書き込めばいいのかがわかりません。。。
###該当のソースコード
<script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ url: 'js/pc.js', //PC用の画像サイズが指定されたファイル dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', //モバイル用の画像サイズが指定されたファイル dataType: 'script', cache: false }); }; }); </script> ``` ###試したこと 画像サイズが書かれたファイルはHTMLのhead内に記載することになっていたので、 同じ位置に書き込みました。 結果、画像が表示されるはずの位置が空白になりました。 ###補足情報(言語/FW/ツール等のバージョンなど) 勉強不足な上初めての質問で、要点が伝えられているか心配です。 社内に詳しい人がおらず、一人で頭を抱えている状況ですので、 アドバイスいただけますと非常に有難いです。。。 どうぞ宜しくお願い致します。 追記:モバイル用のコードです。 (かなり長いコードなので、サイズ指定しているあたりだけ記載します) プラグインは4つのjsファイルがあり、それぞれ 「どの画像を使うか」「defaultのサイズや時間の規定」「動き方の指定?(画像を切り替える動きが多数入っています)」「こちらも動き方?(buffer:1,mask:0,alpha:0などと言う記述)」 です。(よくわかっておりません。。) 以下コードは、そのうちの「defaultのサイズや時間の規定」の一部です。 defaultWidth:720,defaultHeight:270 を編集することで画像サイズが指定できたので、このファイルをPC用、タブレット用、スマホ用に作り、ウィンドウ幅によって読み替えられたら解決しそう!という発想です・・・。 画像そのものは、同一のものを縮小で使用できればと考えていますが、 必要であれば各サイズごとに作成します。 ```ここに言語を入力 var transm = { version : 1.2, released : '2010-08-10 12:00:00', defaultWidth:720,defaultHeight:270,defaultRadius:0,defaultName:null,defaultData:null,defaultCallback:null,defaultLayer:null,defaultAutoplay:0,defaultPingpong:0,default〜 ```
回答3件
あなたの回答
tips
プレビュー